javascript - 使用 *ngFor 数组的 Orderby

Question

我使用 Firebase 实时数据库在我的 json 文件中创建了以下结构来处理 Composer 和他的 Compositions:

我有以下服务，可以为我提供一位 Composer 及其作曲的数据

getComposerWithKey(key: string): Observable<Composer> {
const memberPath = `composer/${key}`;
this.composer = this.db.object(memberPath)
  .snapshotChanges().map(action => {
    const $key = action.payload.key;
    const arrcompositions = action.payload.val().compositions?Object.entries(action.payload.val().compositions):null;
    const data = { 
      $key,
      arrcompositions,
      ...action.payload.val() };
    return data;
  });
return this.composer
}

现在我可以使用 ngFor 指令获取 Composer 信息以及他的作品列表:

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

我的问题是我无法按字母顺序排列作文。我尝试使用 ngx-order-pipe但我不知道如何精确用于订购的值

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

这显然行不通...

Answer 1

You should not use ordering pipes 。

The Angular team and many experienced Angular developers strongly recommend moving to filter and sorting logic into the component.

如果您想对项目进行排序，比方说，name ，这里是:

sortBy(prop: string) {
  return this.composer.arrcompositions.sort((a, b) => a[prop] > b[prop] ? 1 : a[prop] === b[prop] ? 0 : -1);
}

在您的 HTML 中:

<mat-list-item *ngFor="let composition of sortBy('name')">
  {{ composition[1] }}
</mat-list-item>