在Angular 2 App中已經迭代的集合中迭代時* ngFor的語法

Question

我試圖弄清楚如何向下鑽取迭代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來迭代一個數組，我已經在這個視圖中迭代了這個集合？

Answer 1

不應該這樣：

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

是這樣的：

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