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

Posted 2023-02-22

【中文标题】Angular *ngFor 由一个单一的结构指令组成？还是两个？

【英文标题】：Angular *ngFor is made of one single structural Directive? Or two?

【发布时间】：2021-04-22 02:09:46

【问题描述】：

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

这是书中显示的代码：

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

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

所以我开始研究 Angular 的 ngFor 文档。我找到了this：

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

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

第一个负责复制整个 html 元素并放置在 ng-template 标记内（因为在 Angular 中，每个元素只能使用一个结构指令） 第二个负责将 ng-template 中的元素复制到需要迭代的次数，并使用所需数据对元素进行水合

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

很抱歉，我自己没有任何关于书名或作者的详细信息（因为它们不包括在question 的原作者中）。

【参考方案1】：

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

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

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

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

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

在* 之后使用结构指令，例如*ngIf 或*ngFor，而指令只使用普通的属性语法，例如：ngStyle。

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

更多信息：

Directives Overview - Angular Docs