Angular 5中基于实例变量将对象分类到mat-tabs的实现方法

其实这个需求很直观，核心就是把原始数据数组拆分成两个子集，分别对应两个标签页的表格数据源就行。我给你一步步拆解实现方式：

第一步：组件类中准备两个独立数据源 #

首先在你的组件.ts文件里，定义两个MatTableDataSource实例，分别对应两个标签页的表格。同时保留原始的完整数据数组（假设叫originalData）：

import { Component, ViewChild, OnInit } from '@angular/core';
import { MatTableDataSource, MatSort } from '@angular/material';

// 假设你的数据对象类型是这样的
interface YourDataItem {
  x: number;
  // 其他属性...
}

@Component({
  // 组件元数据（selector、templateUrl等）
})
export class YourComponent implements OnInit {
  originalData: YourDataItem[] = [];
  dataSourceTab1 = new MatTableDataSource<YourDataItem>();
  dataSourceTab2 = new MatTableDataSource<YourDataItem>();

  // 如果需要排序，分别获取两个表格的sort实例
  @ViewChild('table1Sort') table1Sort: MatSort;
  @ViewChild('table2Sort') table2Sort: MatSort;

  ngOnInit() {
    // 模拟加载数据（实际场景可能是从API获取）
    this.loadOriginalData();
    // 拆分数据到对应数据源
    this.splitDataIntoTabs();
  }

  loadOriginalData() {
    // 这里替换成你实际的数据加载逻辑
    this.originalData = [
      { x: 1, /* 其他属性 */ },
      { x: 2, /* 其他属性 */ },
      { x: 1, /* 其他属性 */ },
      // ...更多数据
    ];
  }

  splitDataIntoTabs() {
    // 过滤x=1的数据给第一个标签页
    this.dataSourceTab1.data = this.originalData.filter(item => item.x === 1);
    // 过滤x=2的数据给第二个标签页
    this.dataSourceTab2.data = this.originalData.filter(item => item.x === 2);

    // 如果需要排序，给对应的数据源设置sort
    this.dataSourceTab1.sort = this.table1Sort;
    this.dataSourceTab2.sort = this.table2Sort;
  }
}

第二步：模板中绑定对应数据源 #

然后修改你的模板代码，给每个标签页的表格绑定各自的数据源，同时给每个matSort设置唯一的模板引用变量：

<mat-tab-group>
  <mat-tab label="tab1">
    <div>
      <mat-table #table1 [dataSource]="dataSourceTab1" #table1Sort matSort>
        <!-- 你的表格列定义（比如mat-header-cell、mat-cell等） -->
      </mat-table>
    </div>
  </mat-tab>
  <mat-tab label="tab2">
    <div>
      <mat-table #table2 [dataSource]="dataSourceTab2" #table2Sort matSort>
        <!-- 你的表格列定义 -->
      </mat-table>
    </div>
  </mat-tab>
</mat-tab-group>

额外注意点 #

• 如果你的数据是异步加载的（比如从HTTP请求获取），记得在数据返回后再调用splitDataIntoTabs()方法，确保数据已经加载完成再拆分。
• 如果后续数据有更新，只要重新调用splitDataIntoTabs()，两个表格的数据源会自动更新，因为MatTableDataSource会监听data属性的变化。
• 如果需要分页或者过滤功能，同样要给两个数据源分别配置对应的分页器和过滤逻辑，和单个表格的用法一致，只是要分开处理。

这样就能完美实现把x=1和x=2的数据分别展示在两个标签页的表格里啦！

内容的提问来源于stack exchange，提问作者rahs