Firebase实时数据库中*ngFor排序作曲家作品的问题

你的问题出在ngx-order-pipe的排序依据写法上——因为arrcompositions是通过Object.entries转换而来的二维数组（每个元素是[键名, 作品名]的数组），而你原来用的'composition[1]'是针对对象属性的语法，管道无法识别数组索引的这种写法。

下面给你两种可行的解决方案，推荐第一种（更高效，减少前端模板层的逻辑）：

方案1：在获取数据时直接排序（推荐） #

既然我们已经在服务里处理arrcompositions，不如在这里直接完成排序，避免在模板里额外处理。只需要在转换为数组后，调用sort方法，基于子数组的第二个元素（作品名）做字母排序：

getComposerWithKey(key: string): Observable<Composer> {
  const memberPath = `composer/${key}`;
  this.composer = this.db.object(memberPath)
    .snapshotChanges().map(action => {
      const $key = action.payload.key;
      // 先转换为数组，空值时用空数组替代null更安全
      let arrcompositions = action.payload.val().compositions ? Object.entries(action.payload.val().compositions) : [];
      // 按作品名字母升序排序，localeCompare支持多语言排序
      arrcompositions = arrcompositions.sort((a, b) => a[1].localeCompare(b[1]));
      const data = { $key, arrcompositions, ...action.payload.val() };
      return data;
    });
  return this.composer;
}

修改后，模板里不需要任何管道，直接用原来的*ngFor就能展示排序后的作品列表：

<mat-list-item *ngFor="let composition of composer.arrcompositions">
  {{ composition[1] }}
</mat-list-item>

方案2：正确使用ngx-order-pipe排序 #

如果你一定要用管道实现排序，需要给orderBy传递一个函数来指定排序依据（即每个数组元素的第二个值），而不是字符串：

<!-- 升序排序（默认） -->
<mat-list-item *ngFor="let composition of composer.arrcompositions | orderBy: [(item) => item[1]]">
  {{ composition[1] }}
</mat-list-item>

<!-- 如果需要降序，加上': desc' -->
<mat-list-item *ngFor="let composition of composer.arrcompositions | orderBy: [(item) => item[1]]: 'desc'">
  {{ composition[1] }}
</mat-list-item>

另外要确保你已经在模块中正确导入了OrderModule：

import { OrderModule } from 'ngx-order-pipe';

@NgModule({
  imports: [
    // ...其他模块
    OrderModule
  ]
})
export class YourModule { }

为什么原来的写法无效？ #

你之前写的orderBy: 'composition[1]'会让管道尝试去访问每个composition对象的composition[1]属性，但实际上每个composition是数组，并没有这个属性，所以管道无法找到排序依据，自然不会生效。

内容的提问来源于stack exchange，提问作者C. Banzet