web-dev-qa-db-fra.com

Filtrer les éléments par valeur dans ngFor sans écrire de Pipes

J'ai le composant suivant:

class MyComponent {
  public mode = 'v';
  readonly modes = ['v', 'a', 'd'];
  ....
}

Maintenant, je veux utiliser une ngFor pour afficher les boutons de tous les modes dans modes à l'exception du mode actuel stocké dans mode. J'ai le code suivant:

<button *ngFor="let othermode of modes">
  {{ othermode }}
</button>

Je veux toujours que deux boutons soient affichés, contenant les 2 modes restants. J'ai essayé ceci:

<button *ngFor="let othermode of modes.filter(elem => elem !== this.mode)">
  {{ othermode }}
</button>

mais ça ne marche pas. Toutes les questions que j'ai rencontrées devaient écrire un canal personnalisé pour cette fonctionnalité, mais n'y a-t-il pas un moyen simple de filtrer un tableau de chaînes en utilisant uniquement les valeurs?

angularngfor
6
Dane

Vous pouvez utiliser :

<ng-container *ngFor="let othermode of modes">
  <button *ngIf="othermode!=mode">
    {{ othermode }}
  </button>
</ng-container>
3
Vivek Doshi

Utilisez une fonction de filtrage pour filtrer les données:

filterFunction(your_collection): any[] {  
    return your_collection.filter(i => i.field.value === filterKey);
}

et dans le modèle:

*ngFor="let value of filterFunction(datasource)"

Ou utilisez un composant exist. Voir le fil:

https://stackoverflow.com/a/50071762/4332063

8
Wedson Quintanilha da Silva

Utilisez ng-template avec ngIf, si vous souhaitez itérer le tableau avec condition . Voici l'exemple de code. vous pouvez trouver la version de travail ici

<ng-template ngFor let-othermode [ngForOf]="modes">
<button *ngIf="othermode!=mode">
  {{ othermode }}
</button>
</ng-template>
0
Prithivi Raj