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?
Vous pouvez utiliser :
<ng-container *ngFor="let othermode of modes">
<button *ngIf="othermode!=mode">
{{ othermode }}
</button>
</ng-container>
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:
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>