带* ngFor数组的排序器

问题描述 投票:4回答:1

我使用Firebase实时数据库在json文件中制作了以下结构,可用于Composer及其组合物:

enter image description here

我提供以下服务,向我提供一位作曲家的数据及其构图

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指令获取他的作曲列表的作曲家信息:

<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] }}

这显然不起作用...

javascript angular firebase-realtime-database ngfor
1个回答
15
投票
© www.soinside.com 2019 - 2024. All rights reserved.