首页 文章

在Angular 2 App中已经迭代的集合中迭代时* ngFor的语法

提问于
浏览
3

我试图弄清楚如何向下钻取迭代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>

所有这些都按预期工作 .

我不清楚的是当're drilling down into a collection that you'已经用 *ngFor 迭代时如何使用"*ngFor"指令 .

我试过这样做:

<td *ngFor="let service of services"> 
                <span *ngIf="service?.workflowFlags?.action">
                            {{service?.workflowFlags?.action | lowercase | flagAbbreviate | capitalize}}
                </span>

......但是,虽然我没有得到任何结果 . 我如何使用 *ngFor 来迭代一个数组,我已经在这个视图中迭代了这个集合?

1 回答

  • 3

    不应该这样:

    <td *ngFor="let service of services">
    

    是这样的:

    <td *ngFor="let service of record.services">
    

相关问题