Question

我的问题很业余，但是我对ngFor的最佳用法感到好奇。假设我有一个包含这样的数据的组件：

  stuff = [
    {'id':1,'title':'A'},
    {'id':2,'title':'B'},
    {'id':3,'title':'C'},
    {'id':4,'title':'D'},
    {'id':5,'title':'E'}
  ]

我想遍历一下并显示每个项目的标题。我有两种方法：

  <p>Method A</p>
  <ul *ngFor="let item of stuff">
    <li>{{item.title}}</li>
  </ul>
  <p>Method B</p>
  <ul>
    <li *ngFor="let item of stuff">{{item.title}}</li>
  </ul>

在ul中，一个绑定到ul，另一个绑定到li。据我所知，它们都与页面上的两个列表呈现的功能相同。但是我觉得这在直觉上是错误的。

在Angular中是否有“正确”的方法来迭代列表？而使用一个相对于另一个有一些性能上的好处吗？

Answer 1

不等同：

方法A创建的无序列表标签<ul>与项目数一样多。
方法B在一个公用的<li>中创建列表元素<ul>。

两者都是可以接受的，但是方法B在您的DOM中创建的节点更少，并且更接近<ul>和<li>标签的“正常”用法。

方法A

<ul>
  <li>item 1</li>
</ul>

<ul>
  <li>item 2</li>
</ul>

etc.

方法B

<p>Method B</p>
<ul>
  <li> item 1 </li>
  <li> item 2 </li>
  etc.
</ul>

Answer 2

您使用NgFor的元素将不断重复，请参见第一个示例将呈现为这样

<ul>
   <li>A</li>
</ul>
<ul>
  <li>B</li>
</ul>
...

我认为那不是你想要的。

如果您戴上li，那么只有li会重复，这就是我们想要的。

<ul>
   <li>A</li>    
   <li>B</li>
  .........
</ul>

所以对于UL> Li正确的方法是在Li而不是UL上使用NgFor

<ul>
    <li *ngFor="let item of stuff">
      {{item.title}}
    </li>
</ul>

Answer 3

您可以提高ngFor的性能：

Angular中的

NgFor带有按功能（source）覆盖轨迹的选项。它使您可以选择应检查哪些属性/条件角度。

为此，只需向您的组件添加一个方法，如下所示：

trackByFn(index, item) {
  return item.someUniqueIdentifier;
  // or if you have no unique identifier:
  // return index;
}

在组件HTML中，将循环更改为：

<ul *ngFor="let item of stuff; trackBy: trackByFn">
    <li>{{item.title}}</li>
  </ul>

resource，以了解有关trackBy的更多信息。

Angular 6-ngFor指令li迭代的最佳实践？

3 个答案: