使用* ngFor数组进行排序

Question

我使用Firebase实时数据库在我的json文件中创建了以下结构，以便在Composer及其作品上工作：

我有以下服务，它为我提供了一位作曲家的作品数据

cols = df.select_dtypes(np.number).columns

df.loc['Total']= df[cols].sum()

现在我可以使用ngFor指令获取作曲家信息及其作品列表：

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
}

我的问题是我无法按字母顺序排列乐曲。我试图使用ngx-order-pipe，但我不知道如何精确定位用于订购的价值

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

这显然不起作用......

Answer 1

<强> You should not use ordering pipes 即可。

  

Angular团队和许多经验丰富的Angular开发人员强烈建议将过滤和排序逻辑移入组件本身

如果您想对商品进行排序，比方说name，请点击此处：

filterBy(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 filterBy('name')">
  {{ composition[1] }}
</mat-list-item>