如何在Angular Mat-Data Table中指定API数据的优先展示顺序

核心思路 #

先从API返回的数据中提取需要优先展示的条目，再将剩余条目按需求排序，最后合并两组数据作为表格的数据源。

具体实现步骤 #

1. 定义优先级规则
   明确需要优先展示的用户名称列表，处理数据中的空格和大小写差异避免匹配失败：

// 按期望的优先顺序排列
const priorityUserNames = ['System user', 'Default user'];

2. 编写数据排序函数
   实现函数筛选优先级数据、处理剩余数据排序并合并结果：

sortUserData(rawData: string[][]): string[][] {
  // 提取优先级匹配的条目，统一处理空格和大小写
  const priorityItems = priorityUserNames
    .map(targetName => 
      rawData.find(item => 
        item[0].trim().toLowerCase() === targetName.toLowerCase()
      )
    )
    .filter(Boolean); // 过滤未匹配到的项

  // 筛选剩余未在优先级列表中的条目
  const remainingItems = rawData.filter(item => 
    !priorityUserNames.some(targetName => 
      item[0].trim().toLowerCase() === targetName.toLowerCase()
    )
  );

  // 对剩余条目排序（示例按用户名排序，可按需修改）
  remainingItems.sort((a, b) => 
    a[0].trim().localeCompare(b[0].trim())
  );

  // 合并优先级数据和剩余数据
  return [...priorityItems, ...remainingItems];
}

3. 绑定到Angular Material表格
   获取API数据后，调用排序函数并赋值给表格数据源：

import { MatTableDataSource } from '@angular/material/table';

sortedData: string[][];
dataSource = new MatTableDataSource<string[][]>([]);

fetchUserData() {
  // 替换为你的实际API服务调用
  this.yourApiService.getUsers().subscribe(rawData => {
    this.sortedData = this.sortUserData(rawData);
    this.dataSource.data = this.sortedData;
  });
}

4. 表格模板代码
   常规Angular Material表格配置，处理条目内的空格：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
  <!-- 用户名列 -->
  <ng-container matColumnDef="username">
    <th mat-header-cell *matHeaderCellDef> A header </th>
    <td mat-cell *matCellDef="let item"> {{ item[0].trim() }} </td>
  </ng-container>

  <!-- 数值列 -->
  <ng-container matColumnDef="value">
    <th mat-header-cell *matHeaderCellDef> Another header </th>
    <td mat-cell *matCellDef="let item"> {{ item[1] }} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="['username', 'value']"></tr>
  <tr mat-row *matRowDef="let row; columns: ['username', 'value']"></tr>
</table>

自定义调整说明 #

• 调整优先展示条目：直接修改priorityUserNames数组的顺序和内容
• 剩余条目排序规则自定义：比如按数值降序排列，将排序代码改为remainingItems.sort((a, b) => +b[1] - +a[1])
• 若API返回对象（如{name: string, value: string}），只需修改排序函数中属性访问方式（如item.name替代item[0]）

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