父ngFor上次创建的数组的ngFOR take

Question

我想将material选项卡与创建子ngFor阵列的ngFor连接起来。

所以从头开始：

<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>

我做的第一步是创建一个“标签”标签

        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)},
    ]

我的getTabContent()函数根据条件过滤一些数组，并返回带有过滤对象的tabs数组。

    getTabContent(condition){
     this.tabs = this.events.filter(x=> x.price == condition)
     return this.tabs 
    }

之后，我想运行子ngFor *ngFor="let event of tabs"，它应该填充每个选项卡的内容

问题是，第二个ngFor始终采用第一个ngFor创建的最后一个tabs数组，并且所有选项卡都填充相同的数据

新阵列配置tabs: IEvent[] = []

有谁能帮我一下吗？附言:我知道我可以使用列表过滤，但我需要这样做

Answer 1

你可以直接使用tab.content，不需要this.tab。每次运行getTabContent函数时，它都会替换this.tab值，因此它将始终保存最后一个RAN值。

<mat-tab-group>
<mat-tab *ngFor="let tab of asyncTabs ">
    <ng-template mat-tab-label>{{tab.label}}</ng-template>
    <div *ngFor="let event of tab.content">
        <event-thumbnail [eve]="event"></event-thumbnail>
    </div>  
</mat-tab>

getTabContent(condition){
   return this.events.filter(x=> x.price === condition);
}

例如：https://stackblitz.com/edit/angular-m3w1pv

Answer 2

您需要使用索引告诉您要在哪个"tab“上迭代：

<mat-tab-group>
<mat-tab *ngFor="let tab of asyncTabs; let i = index">
    <ng-template mat-tab-label>{{tab.label}}</ng-template>
    <div *ngFor="let event of tabs[i]">
        <event-thumbnail [eve]="event"></event-thumbnail>
    </div>  
</mat-tab>