I'm currently working on a challenge involving drilling down to iterate over an array within another collection of arrays within an Angular 2 application. To start off, I have set up my component to subscribe to an observable in the ngOnInit lifecycle hook like this:
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);
}
Next, in the view, I am using *ngFor to iterate over the "data" array that is returned with the "records" collection:
<tr *ngFor="let record of records.data">
Within the "records.data" array, I am extracting information from the first array within "services" and applying some pipes before displaying the data on the screen:
<td>
<span *ngIf="record?.services[0]?.workflowFlags?.action>
{{record?.services[0]?.workflowFlags?.action | lowercase | flagAbbreviate | capitalize}}
</span>
Everything mentioned above is functioning as intended.
My next goal is to extend beyond checking only the first value and instead iterate over the array of "services" to display any existing values. However, I'm encountering confusion on how to utilize the *ngFor directive when navigating through a collection already being iterated over with *ngFor.
I attempted the following approach:
<td *ngFor="let service of services">
<span *ngIf="service?.workflowFlags?.action">
{{service?.workflowFlags?.action | lowercase | flagAbbreviate | capitalize}}
</span>
Although it doesn't produce errors, it also doesn't yield any results. How can I effectively implement *ngFor in this scenario to iterate over an array along with the existing collection being iterated over?