Utilisez cas = mettre chaque fruit dans la liste correcte. Quelle est la meilleure façon de faire cela?
Je sais que je pourrais filtrer la liste dans un tableau pour chaque fruit, puis créer les listes. Cependant, j'essayais de ne pas faire ça; Ainsi, lorsque la matrice de fruits est mise à jour, chaque liste de chaque liste automatiquement. Le ci-dessous n'est clairement pas correct ...
3 Réponses :
Utilisation de RxJS, vous pouvez mettre vos données dans un sujet. Filtre sur celui-ci par type de fruit spécifique que vous souhaitez, puis dans le modèle, utilisez le tuyau Cela ressemblerait à peu près à ceci. P> async code> pour obtenir les valeurs que vous souhaitez.
<ng-container *ngFor="let fruit$ of [apples$, bananas$, oranges$]">
<ul *ngIf="(fruit$ | async) as fruitArray">
<li *ngFor="let fruitItem of fruitArray">{{ fruitItem.type }}</li>
</ul>
</ng-container>
Je pense que c'est un peu de surkilleuse pour l'envelopper dans un sujet.
@ Enno.void pourquoi? Dans cet exemple chaque fois que le sujet des fruits $ change, toutes les autres valeurs sont mises à jour automatiquement. C'est une programmation réactive assez standard en angulaire. Il peut ensuite être utilisé avec la détection des changements Onpush pour une meilleure performance.
Je suppose que la solution la plus facile est d'utiliser un tuyau angulaire: exemple complet:
https://stackblitz.com/edit/angular-ivy-84vofq
C'est ce que j'ai fait aussi, mais c'est 3 boucles. Devinez qu'il n'y a pas d'autre moyen, oui?
fruits = [
'apple',
'orange',
'banana'
];
fruits1 = [
{type: 'apple', id: '1'},
{type: 'apple', id: '2'},
{type: 'apple', id: '3'},
{type: 'orange', id: '4'},
{type: 'orange', id: '5'},
{type: 'banana', id: '6'},
{type: 'banana', id: '7'},
];
<ng-container>
<ul *ngFor="let a of fruits">
<ng-container *ngFor="let fruit of fruits1">
<li *ngIf="fruit.type === a">{{ fruit.type }}</li>
</ng-container>
</ul>
</ng-container>
I Hope It will Help you.
J'utiliserais une carte
mappe ou un enregistrement . Et calculez les clés sur le changement dans un tableau. (Le tuyau keyvalue fonctionnerait également mais c'est impur). {'Apple': [1,2,3], 'Orange': [4,5], 'Banana': [6,7]} .