Angular中ngFor渲染表格的排序筛选功能失效求助

问题原因 #

当前排序逻辑不生效的核心问题：

• 仅通过@ViewChild引用了Table组件实例，未将表格数据源与Table组件的value属性做绑定
• 表头未配置排序触发属性，*ngFor遍历的是静态原始数据，不会响应排序、筛选的状态变化
• 未实现自定义排序逻辑来处理遍历数据的更新

模板（HTML）修正代码 #

需要给表格根节点绑定数据源、排序配置，给表头添加排序触发、列筛选输入入口：

<p-table #dt [value]="appServerStorageDataValues" [columns]="tableColumns" 
         (sortFunction)="customSort($event)" [customSort]="true"
         [globalFilterFields]="['driveLetter','totalSpace','usedSpace','freeSpace']">
  <ng-template pTemplate="caption">
    <div class="d-flex justify-content-between align-items-center">
      <h5>AppServerStorage</h5>
      <span>Refreshed: {{getTimeStamp() | date: 'MM/dd/yy HH:mm:ss a'}}</span>
      <input pInputText type="text" (input)="dt.filterGlobal($event.target.value, 'contains')" placeholder="全局搜索">
    </div>
  </ng-template>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns" [pSortableColumn]="col.field">
        {{col.header}}
        <p-sortIcon [field]="col.field"></p-sortIcon>
        <input pInputText type="text" (input)="dt.filter($event.target.value, col.field, col.filterMatchMode || 'contains')" class="w-100 mt-1">
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-item>
    <tr>
      <td *ngFor="let col of tableColumns">
        {{item[col.field]}}
      </td>
    </tr>
  </ng-template>
  <ng-template pTemplate="emptymessage">
    <tr>
      <td [attr.colspan]="tableColumns.length">No records found</td>
    </tr>
  </ng-template>
</p-table>
<div *ngIf="appServerStorageDateModified">Modified on {{appServerStorageDateModified | date: 'MM/dd/yy HH:mm a'}}</div>
<div *ngIf="!appServerStorageDataValues || appServerStorageDataValues.length ===0">No AppServerStorage data found.</div>

注：globalFilterFields数组里的字段、tableColumns里的field值，替换成你业务实际的字段名即可

组件TS逻辑补充 #

需要新增表格列配置、原始数据备份、自定义排序方法，避免排序筛选污染原始数据源：

import { Component, OnInit, ViewChild } from '@angular/core';
import { Table } from 'primeng/table';
// 原有业务导入保持不变

export class OperationalStatusComponent extends BaseComponent implements OnInit {
  @ViewChild('dt') table: Table;
  public appServerStorageDateModified: Date;
  // 表格列配置，按业务字段增减
  tableColumns = [
    {field: 'driveLetter', header: '盘符', filterMatchMode: 'contains'},
    {field: 'totalSpace', header: '总空间', filterMatchMode: 'contains'},
    {field: 'usedSpace', header: '已用空间', filterMatchMode: 'contains'},
    {field: 'freeSpace', header: '剩余空间', filterMatchMode: 'contains'}
  ];
  // 原始数据备份，排序/筛选基于备份数据处理，避免污染源数据
  originalAppServerData: any[] = [];
  // 页面实际渲染遍历的数据
  appServerStorageDataValues: any[] = [];

  ngOnInit() {
    super.ngOnInit();
    this.dashboardService.getAllDashboardData().subscribe((dashboardData: DashboardDataTable[]) => {
      if (isUsable(dashboardData)) {
        const appServerStorageData = [];
        const clientBreakdownData = [];
        const clientBreakdownSummaryData = [];

        dashboardData.forEach((data) => {
          if (data.category === 'OperationalStats' && data.dataKey === 'ClientBreakdown') {
            clientBreakdownData.push(data);
          } else if (data.category === 'OperationalStats' && data.dataKey === 'ClientBreakdownSummary') {
            clientBreakdownSummaryData.push(data);
          } else if (data.category === 'OperationalStats' && data.dataKey === 'AppServerStorage') {
            appServerStorageData.push(data);
          }
        });

        this.appServerStorage = [...appServerStorageData];
        if (this.appServerStorage.length > 0) {
          const dataValues = this.appServerStorage[0].dataValue;
          if (dataValues !== '') {
            let parsedData = [];
            if (dataValues.includes('[') && dataValues[dataValues.length - 1].includes(']')) {
              parsedData = JSON.parse(dataValues);
            } else {
              const validDataValuesObj = `[${dataValues}]`;
              parsedData = JSON.parse(validDataValuesObj);
            }
            // 初始化时同时给原始备份、渲染数据赋值
            this.originalAppServerData = [...parsedData];
            this.appServerStorageDataValues = [...parsedData];
          }
          this.appServerStorageDateModified = this.appServerStorage[0].modifiedOn;
        }
      }
    });
  }

  // 自定义排序逻辑，*ngFor自定义模板场景下必须手动更新渲染数据
  customSort(event: {field: string, order: number}) {
    this.appServerStorageDataValues = [...this.originalAppServerData].sort((a, b) => {
      const valueA = a[event.field];
      const valueB = b[event.field];
      // 数字类型排序逻辑
      if (typeof valueA === 'number' && typeof valueB === 'number') {
        return (valueA - valueB) * event.order;
      }
      // 字符串类型排序逻辑
      return valueA.localeCompare(valueB) * event.order;
    });
  }
}

注意事项 #

• PrimeNG Table自带的筛选逻辑只要正确绑定[value]属性即可自动生效，不需要额外写筛选处理代码
• 所有排序、筛选操作都基于原始备份数据做拷贝处理，避免重置状态时无法恢复全量数据
• 列配置的field值必须和接口返回的JSON字段名完全一致，否则无法正确取值、排序、筛选

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