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

Question

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

这是书中显示的代码：

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

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

所以我开始研究 Angular 的 ngFor 文档。我发现了这个：

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

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

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

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

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

标签： angularangular-directiveangular2-directives

Answer 1

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

您只能将一个结构指令应用于一个元素

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

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

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

3. 结构指令在*like之后使用，*ngIf或者*ngForwhile 指令只使用正常的属性语法，如下所示ngStyle：

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

更多信息：

指令概述 - Angular Docs