[英]Syntax for *ngFor when iterating within an already iterated collection in Angular 2 App
我试图弄清楚如何向下钻取迭代Angular 2应用程序中另一个数组集合中的数组。 在我的组件中,我在Angular的ngOnInit生命周期钩子中订阅了这样的observable:
ngOnInit() {
const records = this.filtersService.getByFilter(this.page, this.pagesize, {
'services.workflow.status' : 'client information'
})
.subscribe(resRecordsData => {
this.records = resRecordsData;
console.log(this.records);
},
responseRecordsError => this.errorMsg = responseRecordsError);
}
然后,在我看来,我正在迭代一个带有“记录”的“数据”数组,如下所示:
<tr *ngFor="let record of records.data">
然后,在“records.data”数组中,我从“服务”中的第一个数组中提取信息,然后在打印到屏幕之前通过几个管道,如下所示:
<td>
<span *ngIf="record?.services[0]?.workflowFlags?.action>
{{record?.services[0]?.workflowFlags?.action | lowercase | flagAbbreviate | capitalize}}
</span>
所有这些都按预期工作。
我想做的是,不是只检查第一个值,而是迭代一系列“服务”并返回任何存在的。 我不清楚的是当你深入研究一个你已经用*ngFor
迭代的集合时如何使用“* ngFor”指令。
我试过这样做:
<td *ngFor="let service of services">
<span *ngIf="service?.workflowFlags?.action">
{{service?.workflowFlags?.action | lowercase | flagAbbreviate | capitalize}}
</span>
...但是,虽然我没有得到任何错误,但我也没有得到任何结果。 我如何使用*ngFor
来迭代一个数组,我已经在这个视图中迭代了这个集合?
不应该这样:
<td *ngFor="let service of services">
是这样的:
<td *ngFor="let service of record.services">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.