Angular *ngFor 由一个单一的结构指令组成?还是两个? [英] Angular *ngFor is made of one single structural Directive? Or two?

问题描述

在我回答另一个问题时，我看到一本书的屏幕截图，上面写着 *ngFor(语法糖版本)由两个结构指令组成.>

这是书中显示的代码:

<li *ngFor="let book of books">{{书名}}

所以

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

所以现在我正在考虑这个场景.也许它就像两个(结构)指令:

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

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

很抱歉，我自己没有关于书名或作者的任何详细信息(因为 问题).

解决方案

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

<块引用>

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

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

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

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

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

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

更多信息:

指令概览 - Angular 文档

While I was answering another question, I saw a screenshot of a book that states that *ngFor (syntactic sugar version) is made of two structural directives.

This is the code shown in the book:

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

So either the Angular guide is wrong when it states that "Structural directives are easy to recognize. An asterisk (*) precedes the directive attribute name...". Or the book is wrong. Because I see only one asterisk there.

So I started digging in the ngFor docs of Angular. And I've found this:

From this screenshot, it seems that the author of the book is right, that [ngFor] and [ngForOf] are both (structural) directives.

So now I am thinking about this scenario. Maybe it's like two (structural) directives:

1. the first one that is responsible for copying the entire HTML element and place inside the ng-template tag (since in Angular you can only use one structural directive for each element)
2. the second that is responsible for copying the element inside ng-template as many time as it needs to be iterated and hydrating the elements with the required data

This is a screenshot of the book that I am talking about:

I am sorry, but I don't have any details myself about the name of the book or the author (as they are not included by the original author of the question).

解决方案

The Angular docs clearly states that only one structural directive may be used:

You may apply only one structural directive to an element

It's also might be helpful to understand the difference between an attribute directive and a structural directive:

1. Structual directives change the DOM layout by adding/removing DOM elements, while attribute directives only change the appearance or behavior of an element.

2. Structual directives change the structure of the view, while attribute directives are used as attributes of an element.

3. Structural directives are used after * like *ngIf or *ngFor while directives just use the the normal attributes syntax like this: ngStyle.

So to answer your question, the code snippet uses one structural directive. Not sure why the author said two, but as a rule of thumb if two sources collide, chances are the correct one is the official docs.

More info:

Directives Overview - Angular Docs

这篇关于Angular *ngFor 由一个单一的结构指令组成?还是两个?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！