结构指令 - NgFor指令
优质
小牛编辑
121浏览
2023-12-01
指令与我们看到的其他指令有不同的语法。 如果你熟悉for...of语句，你会注意到，他们几乎相同。 ngFor允许您指定要迭代的iterable对象，以及在范围内引用每个项的名称。 在我们的示例中，您可以看到该 可用于插值以及属性绑定。 该指令做一些额外的解析，所以当它扩展到模板形式，它看起来有点不同：
请注意，模板元素上有一个奇怪的let-episode属性。 ngFor指令在其范围内提供一些变量作为上下文。 let-episode是一个上下文绑定，这里它接受迭代的每个项的值。
- index - 当前项目的位置在从0开始的迭代中
- last - 如果当前项是可迭代中的最后一个项，则为true
- odd - 如果当前索引是奇数，则为true
trackBy
通常ngFor用于迭代具有唯一ID字段的对象列表。 在这种情况下，我们可以提供一个trackBy函数，帮助Angular跟踪列表中的项目，以便它可以检测哪些项目已添加或删除，并提高性能。
Angular 2将通过引用来尝试和跟踪对象，以确定应该创建和销毁哪些项目。 然而，如果你用一个新的对象源代替列表，也许是一个API请求的结果，我们可以通过告诉Angular 2如何跟踪事情来获得一些额外的性能。
例如，如果按钮是要发出请求并返回新的剧集列表，我们可能不想销毁并重新创建列表中的每个项目。 如果剧集有唯一的ID，我们可以添加一个trackBy函数：
当我们查看示例时，当我们点击Add Episode时，我们可以看到控制台输出，指示只有一个组件被创建 - 用于新添加到列表中的项目。
但是，如果我们从中删除trackBy - 每次我们单击按钮，我们将看到组件中的项目被销毁和重新创建。