如何基于内层*ngFor属性对Angular外层*ngFor进行排序？

当然可以基于内层*ngFor的属性对外层数据进行排序，我来给你两种实用的实现方案，你可以根据自己的场景选择：

方案一：升级自定义排序管道，支持嵌套属性路径 #

如果你的现有排序管道是自定义的，可以扩展它来解析嵌套的属性路径（比如内层数组的某个属性），这样就能直接在模板中指定排序依据。

首先修改你的排序管道代码（假设管道名为sortBy）：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'sortBy'
})
export class SortByPipe implements PipeTransform {
  transform<T>(array: T[], sortKey: string, order: 'asc' | 'desc' = 'asc'): T[] {
    if (!array || !sortKey) return [...array];

    return [...array].sort((a, b) => {
      // 解析嵌套属性，比如'systems.0.name'表示取第一个system的name属性
      const getNestedValue = (obj: any, keyPath: string) => {
        return keyPath.split('.').reduce((current, key) => {
          return current ? current[key] : undefined;
        }, obj);
      };

      const valA = getNestedValue(a, sortKey);
      const valB = getNestedValue(b, sortKey);

      // 处理不同类型的排序逻辑
      if (typeof valA === 'string' && typeof valB === 'string') {
        return order === 'asc' ? valA.localeCompare(valB) : valB.localeCompare(valA);
      }
      if (typeof valA === 'number' && typeof valB === 'number') {
        return order === 'asc' ? valA - valB : valB - valA;
      }
      if (valA instanceof Date && valB instanceof Date) {
        return order === 'asc' ? valA.getTime() - valB.getTime() : valB.getTime() - valA.getTime();
      }

      // 默认按字符串比较，处理空值情况
      return String(valA).localeCompare(String(valB)) * (order === 'asc' ? 1 : -1);
    });
  }
}

然后在模板中使用，比如按内层systems数组第一个元素的name属性升序排序：

<table *ngIf="option == 'Document Type'">
  <tr>
    <th class="modalheader">Sources</th>
    <th class="modalheader">Systems</th>
  </tr>
  <!-- 用sortBy管道，指定嵌套属性路径'systems.0.name' -->
  <tr *ngFor="let doctype of doctypes | sortBy: 'systems.0.name'">
    <td>{{ doctype.sources }}</td>
    <td>
      <span *ngFor="let system of doctype.systems">{{ system.name }}</span>
    </td>
  </tr>
</table>

方案二：在组件中预处理排序（推荐） #

管道默认是纯管道，当数组内容变化但引用不变时，管道不会重新执行，可能导致排序不更新。更稳妥的方式是在组件中提前处理排序逻辑，直接返回排序后的数组：

首先在组件中添加排序后的 getter：

import { Component } from '@angular/core';

// 假设你的数据结构是这样的
interface System {
  name: string;
  // 其他属性，比如createdDate: string;
}

interface DocType {
  sources: string;
  systems: System[];
}

@Component({
  selector: 'your-component-selector',
  templateUrl: './your-component.component.html'
})
export class YourComponent {
  option = 'Document Type';
  doctypes: DocType[] = [
    // 你的原始数据
  ];

  // 获取按内层属性排序后的数组
  get sortedDoctypes(): DocType[] {
    // 这里以按systems数组第一个元素的name升序为例
    return [...this.doctypes].sort((a, b) => {
      // 处理内层数组为空的情况，避免报错
      const nameA = a.systems[0]?.name ?? '';
      const nameB = b.systems[0]?.name ?? '';
      return nameA.localeCompare(nameB);
    });

    // 如果要按其他逻辑，比如按systems数组的长度排序：
    // return [...this.doctypes].sort((a, b) => a.systems.length - b.systems.length);

    // 或者按systems中最晚的创建日期排序：
    // return [...this.doctypes].sort((a, b) => {
    //   const latestA = Math.max(...a.systems.map(s => new Date(s.createdDate).getTime()));
    //   const latestB = Math.max(...b.systems.map(s => new Date(s.createdDate).getTime()));
    //   return latestB - latestA; // 降序
    // });
  }
}

然后在模板中直接使用这个排序后的数组：

<table *ngIf="option == 'Document Type'">
  <tr>
    <th class="modalheader">Sources</th>
    <th class="modalheader">Systems</th>
  </tr>
  <tr *ngFor="let doctype of sortedDoctypes">
    <td>{{ doctype.sources }}</td>
    <td>
      <span *ngFor="let system of doctype.systems">{{ system.name }}</span>
    </td>
  </tr>
</table>

注意事项 #

• 如果内层数组可能为空，一定要在排序逻辑中处理空值（比如用??运算符兜底），避免出现undefined报错。
• 组件预处理排序的方式更灵活，也更容易调试，适合复杂的排序逻辑；管道方式适合简单的、固定的排序需求。

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