* ngFor应该由内部模板使用，还是应该在外部使用？

Question

我见过* ngFor用于从父模板重复子模板，也看到它在子模板本身内部使用。是否应该首选其中任何一种？

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

或者我应该将ngFor移动到<app-result-tile>组件吗？

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

我将编写一个管道来过滤父组件中的结果组件。在这种情况下使用第一种方法会更有意义吗？

Answer 1

两者都有效。这取决于你的用例。

前者会创建app-result-tiles组件的不同实例以及相关数量的模板，稍后会创建一个组件实例和一个模板。

Answer 2

这里的问题是迭代项是否应该形成一个单独的组件。

如果迭代项目将单独使用，答案是肯定的。

如果它现在和将来都会毫无例外地永远不会被自己使用但总是在列表中使用，那么ngFor *应该在子组件中使用。

如果管道过滤与否，则ngFor *无关。