*ngFor doit-il être utilisé par les modèles en interne ou en externe ?

Question

J'ai vu *ngFor utilisé pour répéter des modèles enfants à partir du modèle parent, et je l'ai également vu utilisé à l'intérieur du modèle enfant lui-même. Y a-t-il une situation dans laquelle l'un ou l'autre devrait être préféré ?

<div class="results">
  <app-result-tile
    *ngFor="let d of service.data"
    [data]="d">
  </app-property-tile>
</div>

ou dois-je déplacer le ngFor dans la section <app-result-tile> composant ?

<div class="results">
  <app-result-tiles
    [data]="service.data"> <!-- results now repeat internally with li's or something.-->
  </app-result-tiles>
</div>

Je vais écrire un tube pour filtrer le(s) composant(s) résultat(s) à partir du composant parent. Serait-il plus logique d'utiliser la première méthode dans ce cas ?

Answer 1

Les deux sont valables. Cela dépend de votre cas d'utilisation.

L'ancien créerait différentes instances de app-result-tiles et donc le nombre de modèles correspondant, alors que plus tard, on créera une instance de votre composant et un seul modèle.

Answer 2

La question qui se pose ici est de savoir si l'élément itéré doit constituer un composant distinct ou non.

La réponse est OUI SI l'élément itéré est utilisé seul.

S'il doit TOUJOURS sans exception, maintenant et à l'avenir, ne jamais être utilisé seul mais toujours dans une liste, ALORS le ngFor* doit être utilisé à l'intérieur du composant enfant.

Le fait qu'il y ait ou non un tuyau filtrant sur le ngFor* n'est pas pertinent.