Angular *ngFor 由一个单一的结构指令组成？还是两个？

编程问答 2022-05-29

问题描述

在我回答另一个问题时，我看到一本书的屏幕截图，其中指出 *ngFor（语法糖版本）由两个结构指令组成。

这是书中显示的代码：

<ul>
    <li *ngFor="let book of books">
        {{book.title}}
    </li>
</ul>

因此，当 Angular guide 声明“结构指令很容易识别。星号 (*) 位于指令属性名称之前...”时，要么是错误的。或者书是错的。因为我在那里只看到一个星号。

所以我开始挖掘 Angular 的 ngFor 文档。我发现this：

enter image description here

从这个截图来看，这本书的作者似乎是对的，[ngFor] 和 [ngForOf] 都是（结构）指令。

所以现在我正在考虑这个场景。 也许它就像两个（结构）指令：

  1. 第一个负责复制整个 HTML 元素并将其放置在 ng-template 标签内（因为在 Angular 中，您只能为每个元素使用一个结构指令）
  2. 第二个负责复制 ng-template 中的元素，根据需要重复多次，并将元素与所需的数据结合

这是我正在谈论的书的屏幕截图：

screenshot of a book that states that *ngFor is made by two structural directives

很抱歉，我自己没有关于书名或作者的任何详细信息（因为 question 的原作者未包含这些信息）。

解决方法

Angular docs 明确指出只能使用一个结构指令：

你只能对一个元素应用一个结构指令

理解属性指令和结构指令之间的区别也可能会有所帮助：

  1. 结构指令通过添加/删除 DOM 元素来改变 DOM 布局，而属性指令仅改变元素的外观或行为。

  2. 结构指令改变视图的结构，而属性指令用作元素的属性。

  3. 结构指令在 * 之后使用，如 *ngIf 或 *ngFor，而指令仅使用像这样的普通属性语法：ngStyle。

因此，为了回答您的问题，代码片段使用了一个结构指令。不知道作者为什么说两个，但根据经验，如果两个来源发生冲突，那么官方文档很可能是正确的。

更多信息：

Directives Overview - Angular Docs

angularangular-directiveangular2-directives