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?
source to share