web-dev-qa-db-ja.com

* ngFor配列を使用したOrderby

Firebase Real Time Databaseでjsonファイルに次の構造を作成して、Composerと彼の作曲で動作するようにしました。

enter image description here

次のサービスを使用して、1つのデータを提供します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 infoを取得できます。

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

これは明らかに機能しません...

javascriptangularfirebase-realtime-databasengfor
5
C. Banzet

順序パイプを使用しないでください。

Angularチームと多くの経験豊富なAngular=開発者は、ロジックをコンポーネントにフィルターおよびソートすることを強くお勧めします。

アイテムを並べ替える場合は、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>
16
user4676340