I am looking to link material tabs with ngFor to generate arrays for child ngFor.
Let's start from the beginning:
<mat-tab-group>
<mat-tab *ngFor="let tab of asyncTabs ">
<ng-template mat-tab-label>{{tab.label}}</ng-template>
<div *ngFor="let event of tabs">
<event-thumbnail [eve]="event"></event-thumbnail>
</div>
</mat-tab>
The first step I take is to create a "tabs" labels
this.asyncTabs = [
{label: 'A-B', content: this.getTabContent(10)},
{label: 'C-D', content: this.getTabContent(5)},
{label: 'E-F', content: this.getTabContent(0)},
{label: 'G-H', content: this.getTabContent(0)},
{label: 'I-J', content: this.getTabContent(0)},
{label: 'K-L', content: this.getTabContent(0)},
{label: 'M-N', content: this.getTabContent(0)},
{label: 'O-P', content: this.getTabContent(0)},
{label: 'R-S', content: this.getTabContent(0)},
{label: 'T-U', content: this.getTabContent(0)},
{label: 'W-X', content: this.getTabContent(0)},
{label: 'Y-Z', content: this.getTabContent(0)},
]
My getTabContent() function filters an array based on a condition and returns tabs array with filtered objects.
getTabContent(condition){
this.tabs = this.events.filter(x=> x.price == condition)
return this.tabs
}
After that, I want to iterate through the child ngFor *ngFor="let event of tabs" to populate the content of each tab
The issue is that the second ngFor always takes the last tabs array created by the first ngFor, resulting in all tabs being populated with the same data
New Array configuration tabs: IEvent[] = []
Can anyone provide assistance with this, please? P.S. I am aware that list filtering can be used, but I prefer to do it this way