web-dev-qa-db-fra.com

Commandez avec le tableau * ngFor

J'ai créé la structure suivante dans mon fichier json avec Firebase Real Time Database pour travailler sur Composer et ses compositions:

enter image description here

J'ai le service suivant qui me donne les données d'un composer avec sa composition

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
}

Maintenant, je peux obtenir les informations composer avec une liste de ses compositions avec la directive ngFor:

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

Mon problème est que je ne peux pas commander les compositions par ordre alphabétique. J'ai essayé d'utiliser le ngx-order-pipe mais je ne sais pas comment préciser la valeur utilisée pour commander

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

Cela ne fonctionne évidemment pas ...

javascriptangularfirebase-realtime-databasengfor
9
C. Banzet

Vous ne devez pas utiliser de tuyaux de commande.

L'équipe Angular et de nombreux développeurs expérimentés Angular) recommandent fortement de passer au filtrage et au tri de la logique dans le composant.

Si vous voulez trier vos articles par, disons, name, c'est parti:

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

Dans votre HTML:

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