angular - 为什么 *ngFor 不需要括号？

Question

我是 Angular 框架的新手，最近被介绍了属性 *ngFor=""。

据我所知，这采用与 JavaScript for() 循环相同的参数...因此，*ngFor="let item of itemCollection"。但是，与其他指令相比，*ngFor 不需要将其周围的 [] 视为代码。

This documentation page建议 hero 属性需要 [] 将其值作为代码处理，并返回 "hero" 的值:

<app-hero-detail *ngFor="let hero of heroes" [hero]="hero"></app-hero-detail>

为什么会这样？ *ngFor 也被评估，但不需要 [] 显然......它是 * 前缀，表明该值必须总是被当作代码还是什么？

Answer 1

首先您必须了解括号符号 []用于 property binding在 Angular 。

我将使用您提供的示例代码来帮助解释这一点:

<app-hero-detail *ngFor="let hero of heroes" [hero]="hero"></app-hero-detail>

在本例中为 [hero]在[hero]="hero"是属性绑定(bind)的一个示例，其中数据将从数据源(组件)单向流向 View (HTML)。属性(property)hero您会发现使用 @Input decorator 定义为该组件的输入属性.

这让我们想到了您的问题:

Why doesn't *ngFor need brackets?

答案正是你所想的。您不需要为 *ngFor 使用 [bracket notation]因为星号 (*) 的存在。星号是 Angular 的速记符号(或语法糖)，它允许开发人员编写更清晰、更易于理解和维护的代码。在工作表下面，当 Angular 编译器“脱糖”你的代码时，它看起来像这样:

<template [ngFor]="let hero of heroes">
     <div></div>
 </template>

Angular 编译器会进一步将您的代码“脱糖”成如下所示:

<template ngFor let-hero="$implicit" [ngForOf]="heros">
   <div>...</div>
 </template>

所以最后你可以看到 ngFor Structural Directive最终被视为需要属性绑定(bind)的任何其他属性。然而，由于它是内置指令，Angular 为我们提供了更简洁的速记符号。不同于 hero我们自己创建和定义的属性，因此要求我们在 HTML 中明确使用括号表示法。不要忘记，即使您可以在结构指令中使用括号表示法，您也应该 always prefer the asterisk .