ngFor 取最后一个由父 ngFOR 创建的数组

Question

我想将材质选项卡与为子 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[] = []

谁能帮帮我，好吗？ P.S 我知道我可以使用列表过滤，但我需要这样做

Answer 1

你可以直接使用tab.content，不需要this.tab。每次运行 getTabContent 函数时，它都会替换 this.tab 的值，因此它会始终保持上次运行的值。

<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

你需要用索引告诉你要迭代哪个“标签”：

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