如何在Angular 2

Question

对于类似思维导图的学习应用程序，所有元素（行/文本）都通过视图中的不同组件放置。数据从数据库中获取并保存在ObservableArray中（如果它在视图中）。有两种不同的变化：1。滚动，视图更改并获取新数据; 2.用户更改/添加/删除视图中的元素（不提取新数据）。

将observable“读取”到ObjectArray是否更好用@ ngFor迭代它，将每个Object传递给匹配的Component或者只传递一个id数组并让每个Component订阅ObservableArray中匹配的Element？

到目前为止，我使用的是我在许多教程和示例中看到的第一种方法，但使用第二种方法会使用户更改变得更加容易，只会检测到相关元素。

Answer 1

我认为第一种方式仍然更好。在优化方面，您可以使用trackBy

的*ngFor功能

<div *ngFor="let item for (items | async); trackBy: item?id">
  <item [item]="item"></item>
</div>

这假设您的商品具有唯一ID。这将确保不会再次呈现每个item元素。另外，将项目组件的changeDetectionStrategy设置为OnPush。因此，仅当输入（即item更改时）才会触发项目组件更改检测。

基本上item组件应该是哑（表示）组件，它只显示项目数据。