Syntax for *ngFor when iterating within an already iterated collection in Angular 2 App

Question

I am trying to figure out how to drill down to iterate over an array that's within another collection of arrays in an Angular 2 app. In my component I am subscribing to an observable like this in Angular's ngOnInit life cycle 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);
}

Then, in my view, I am iterating over an array of "data" that is being returned with "records", like this:

<tr *ngFor="let record of records.data">

Then, within that "records.data" array I'm pulling out info from the first array within "services" and passing through a couple of pipes before printing to the screen, like so:

        <td> 
            <span *ngIf="record?.services[0]?.workflowFlags?.action>
                {{record?.services[0]?.workflowFlags?.action | lowercase | flagAbbreviate | capitalize}}
            </span>

All of the above is working as expected.

What I'd like to do is, instead of just checking the first value, is to iterate over an array of "services" and return any that exist. What I'm unclear on is how to use the "*ngFor" directive when you're drilling down into a collection that you're already iterating over with an *ngFor .

I tried doing this:

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

... But, while I don't get any errors, I also don't get any results. How can I use *ngFor here to iterate over an array with the collection I'm already iterating over in this view?

Answer 1

Shouldn't this:

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

be this:

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