根据实例变量将对象分隔成 mat-tabs

Question

Angular 5

我在 mat-tab-group 中有 2 个选项卡，每个选项卡包含一个 mat-table。有一个对象数组被提取到 datasource 中，用于填充这些 mat-tables 。每个对象都有一个变量，比如 x，它的值可以等于 1 或 2。

如果一个对象的 x=1，它应该进入第一个选项卡，否则进入第二个选项卡。

我该怎么做？

当前结构：

<mat-tab-group>
        <mat-tab label="tab1">
          <div>
            <mat-table #table [dataSource]="dataSource" matSort>
            ...
            </mat-table>
          </div>
        </mat-tab>
        <mat-tab label="tab2">
          <div>
            <mat-table #table [dataSource]="dataSource" matSort>
            ...
            </mat-table>
          </div>
        </mat-tab>
<mat-tab-group>

注意：我想这可以使用内联模板变量来完成，但不知道如何实现。也愿意接受更好的解决方案（如果有的话）。

Answer 1

在您的情况下，您将无法为所有选项卡使用一个数据源，每个选项卡都需要具有唯一性。

作为一个解决方案，我会首先准备好你所有的数据，通过 "x" 参数分组。

下一步将所有分组数据转换为 MatTableDataSource 对象。

最后一步是使用 *ngFor 为每个单独的组呈现所有 "mat-tab"。

根据实例变量将对象分隔成 mat-tabs

Segregating objects into mat-tabs based on instance variable

angular2-template

angular