小编sky*_*dev的帖子
角材料创建对话框与现有功能位于同一组件中
我试图添加一个在我的Web服务执行之前被调用的Angular Material对话框（仅标题和yes / no）。事实是，我不想在单独的组件中创建对话框HTML。我需要对话框HTML与现有代码位于同一文件中。当我单击callAPI按钮时，对话框需要打开。这是我现有的组件代码
<mat-tab-group>
<mat-tab label="Tab 1">
<button mat-flat-button color="warn" (click)="callAPI()">Open Dialog</button>
</mat-tab>
<mat-tab label="Tab 2">
</mat-tab>
</mat-tab-group>
callAPI() {
this.http.get<any>('https://example.com/api').subscribe(data => {
this.data = data;
this.loading = false;
},
err => {
this.loading = false;
});
}
推荐指数
解决办法
查看次数
更新数组中一个对象的值
我正在尝试更新数组中的一个值。基本上我想更新数组中一个对象的状态值。这是我的数组
[
{
"projects": {
"projectname": "one",
"dateadded": "16 April 2018, 7:23AM",
"status": 1
}
},
{
"projects": {
"projectname": "two",
"dateadded": "16 April 2018, 7:23AM",
"status": 1
}
},
{
"projects": {
"projectname": "three",
"dateadded": "16 April 2018, 7:32AM",
"status": 1
}
}
]
这是我的尝试，但它更新了数组中的所有内容。参数 1 是项目名称 - 看看我是否在正确的项目上
archive(){
var parameter1 = this.navParams.get('param1');
this.storage.get('projectsStore').then(data => {
for (var i = 0; i < data.length; i++) {
if (data[i].projects.projectname == parameter1) {
this.project = [{ "projectname":data[i].projects.projectname, "dateadded":data[i].projects.dateadded, "location":data[i].projects.location, "status":0 …推荐指数
解决办法
查看次数
以角度 6 获取 IFrame img
我的 Angular 应用程序中有一个 iframe。iframe 具有 base64 格式的图像。现在我正在尝试获取该图像的 base64 代码并将其存储在父页面/Angular 应用程序的变量中。请问有人可以帮忙吗？我找到了这篇文章
这是我的 iframe 的 HTML 代码
<iframe src="http://eohdigitalappstore.co.za/test/test.html"></iframe>
通过能够在 iframe 页面中获取元素，我设法取得了进一步的进展，但现在我正在尝试获取元素树中的图像
const doc = this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentWindow;
console.log(doc.body);
我可以指向如下所示的 HTML 元素树
推荐指数
解决办法
查看次数
角度路由问题：新页面显示在旧页面下方
然而，我正在尝试导航到我的角度应用程序中的新页面。我创建的新页面显示在我的主页下方，即 app.component.ts
这是我的路由
const routes: Routes = [
{ path: '', redirectTo: 'billing-cycle', pathMatch: 'full' },
{ path: 'billing-cycle', component: AppComponent},
{ path: 'customer-account-docs', component: CustomerAccountDocsComponent }
];
这是我的路由器链接
<a routerLink='/customer-account-docs'>{{msgFound.value}}</a>
推荐指数
解决办法
查看次数
角度句柄可处理500个服务器错误
如何修改我的http调用以处理（捕获）500个服务器错误。我尝试调用API，但在函数的“ err”部分收到“ 500（内部服务器错误）”。我希望能够在可能的情况下捕获它，但不确定如何执行。是否有一种简单的方法？
call_http() {
this.http.get<any>('/api/goes/here').subscribe(data => {
this.result = data;
},
err => {
console.log(err);
});
}
我没有使用任何标头，映射，错误处理程序等。这只是一个基本调用。
推荐指数
解决办法
查看次数
将搜索过滤器添加到Angular-6数据表
我试图在我的Angular数据表的顶部添加一个搜索过滤器（我现在不太在意它的位置）。我正在使用Angular-6-datatable（https://www.npmjs.com/package/angular-6-datatable）和引导程序。我在这里创建了一个stackblitz项目。
https://stackblitz.com/edit/angular-utd8cc
我只想能够搜索“名称”列。请协助。
推荐指数
解决办法
查看次数
从角度服务和控制台获取数据记录它
我正在尝试将app.component文件中的console.log数据作为我的服务文件.我没有定义.
这是我的代码
service.ts
getBillingCycles() {
return this.http.get('../../assets/download_1.json');
};
app.component.ts
export class AppComponent implements OnInit{
title = 'ngMTN';
billing: any;
constructor(private http: HttpClient, private BillingCyclesService: BillingCyclesServiceService) { }
ngOnInit() {
this.getBillingCycles();
}
getBillingCycles() {
this.BillingCyclesService.getBillingCycles()
.subscribe(data => this.billing = data);
console.log(this.billing);
}
}
推荐指数
解决办法
查看次数
将 HTML 传递到 Mat 对话框
我正在尝试将 HTML 作为消息参数传递到我的 Mat Dialog 代码中。所以我有以下内容，但不确定如何将 HTML 传递给它。
openAlertDialog() {
const dialogRef = this.dialog.open(AlertDialogComponent,{
data:{
message: '<!DOCTYPE html><html><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html>',
buttonText: {
cancel: 'Done'
}
},
});
}
我想在以下内容中添加 HTMLmessage
我在这里有一个代码的 stackblitz https://stackblitz.com/edit/mat-dialog-example-kchzml?file=app/app.component.ts
知道我该怎么做吗？
推荐指数
解决办法
查看次数
jQuery - 当我们点击另一个div时,从div中删除类
jQuery(document).ready(function() {
if(jQuery(window).width() < 768){
jQuery('.nb-team-grid').on('click', function(e){
jQuery(this).toggleClass('test');
});
}
})
嘿家伙,我需要做一个互动.当我们点击一个div时,一个类需要添加,当我们再次点击时,该类应该删除它的自我.我做到了,你可以看到上面的代码.还有一件事我需要的是,我根据设计重复了很多次div.因此,如果我们单击任何div,则应该从我们之前单击的div中自动删除该类.请查看此链接以获得更多说明.谢谢 :)
http://dev.netbramha.in/projects/test-coder/test.html 点击此链接中显示的每个网格
推荐指数
解决办法
查看次数
在 Angular 中验证电话号码
我正在尝试验证 Angular 应用程序中的电话号码。我有一个带有输入字段的表单。我正在尝试以下操作，但收到以下错误。
无效的正则表达式：/^(?:+?(61))？?(?:((?=.*)))?(0?[2-57-8]))？?(dd(?:- |(?!dd[- ]?d[- ]))dd[- ]?d[- ]?d{3})$/: 没有可重复的内容
超文本标记语言
<div class="input-container">
<label for="mobile">Cell number*</label>
<input id="mobile" type="text" formControlName="mobile" size="10" placeholder="000 000 000">
</div>
<p class="error"*ngIf="!userFormGroup.get('mobile').valid && userFormGroup.get('mobile').dirty">
* Invalid mobile number.
</p>
TS
mobile: new FormControl(null, [Validators.required, Validators.pattern('^(?:\+?(61))? ?(?:\((?=.*\)))?(0?[2-57-8])\)? ?(\d\d(?:[- ](?=\d{3})|(?!\d\d[- ]?\d[- ]))\d\d[- ]?\d[- ]?\d{3})$')])
我基本上需要验证输入是否至少有 10 位数字、允许 + 字符、排除任何空格
推荐指数
解决办法
查看次数
获取 ngFor 项目的索引并更新值
我正在尝试更新 Angular 模板中输入字段的文本值。模板数据值在 NgFor 循环中生成，该循环从 Web 服务获取值。这是我的模板。
<ul *ngFor="let item of vals?.bu">
<li>
<table>
<tr>
<td><button type="button" class="btn btn-info">{{item?.id}}</button></td>
<td><input type="text" [(ngModel)]="item.bcluster"></td>
<td><input type="text" [(ngModel)]="item.bsector"></td>
<td><button type="button" id={{item?.id}} (click)="update($event)">Update</button></td>
</tr>
<tr>
<td></td>
<td><input type="text" [(ngModel)]="item.bgroup"></td>
<td><input type="text" [(ngModel)]="item.bunit"></td>
<td><button type="button" id={{item?.id}} (click)="delete($event)">Delete</button></td>
</tr>
</table>
</li>
</ul>
我现在需要从模板中获取字段的值，即“bcluster、bsector、bgroup、bunit”到我的 TS 文件中，以便调用更新 API 调用（通过更新按钮上的点击事件），但是当我尝试获得未定义的值，因为我没有获得确切的行索引。我不知道如何做到这一点。
这是我的 TS 文件（只是想把值调出来）
update(event) {
console.log(this.bcluster);
}
推荐指数
解决办法
查看次数
Angular hide and show buttons not working
I have the following requirement that is not working with my current code. I need to hide or show buttons which sit in my app header component based on a users role.
The users role comes from session storage which is being called in a service file.
setStoreData() {
const data = JSON.parse(sessionStorage.getItem(`oidc.user:${environment.accessTokenApiUrl}:${environment.clientId}`));
return data;
}
I then consume the service in my header component on ngOnit and assign it to a variable
ngOnInit() {
this.userRole = this._storeService.setStoreData().profile.role;
}
Then …
推荐指数
解决办法
查看次数
标签 统计
angular ×11
typescript ×3
javascript ×2
arrays ×1
for-loop ×1
html ×1
jquery ×1
ngfor ×1
regex ×1