Syntax for * ngFor when iterating over an already iterated collection in Angular 2 application

I'm trying to figure out how to expand to iterate over an array that is in a different set of arrays in an Angular 2 app. In my component, I subscribe to an observable like this in the 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);
}

      

Then, in my opinion, I iterate over the array of "data" that is returned with "records", for example:

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

      

Then, inside that array records.data, I pull out the information from the first array in "services" and go through a couple of pipes before printing it to the screen, for example:

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

      

All of the above works as expected.

What I would like to do, instead of just checking the first value, is to iterate over the array of "services" and return any existing ones. I don't understand how to use the "* ngFor" directive when you drill through a collection that you are already iterating over with *ngFor

.

I tried to do this:

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

      

... But although I am not getting any errors, I am also not getting any results. How can I use it *ngFor

here to iterate over an array with a collection that I'm already looking at in this view?

+3


source to share


1 answer


Do not do it:

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

      



:

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

      

+3


source







All Articles