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

Question

我正在尝试弄清楚如何向下钻取以迭代 Angular 2 应用程序中另一个数组集合中的数组。在我的组件中，我在 Angular 的 ngOnInit 生命周期 Hook 中订阅了一个像这样的可观察对象:

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”数组中，我从“services”中的第一个数组中提取信息，并在打印到屏幕之前通过几个管道，如下所示:

        <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 来迭代包含我已在此 View 中迭代的集合的数组？

Answer 1

不应该这样:

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

是这样的:

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