为什么 *ngFor 不需要括号？答案

【问题标题】：Why doesn't *ngFor need brackets?为什么 *ngFor 不需要括号？
【发布时间】：2019-10-27 10:56:14
【问题描述】：

我是 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 也被评估，但显然不需要 []... 是 * 前缀表示必须始终将值视为代码还是什么？

【问题讨论】：

因为它是一个structural directive，而这些都没有，因为它们有能力改变它们所绑定的节点（重复、渲染成 dom 等），而属性绑定则没有'吨。 TL;DR 这是 Angular 人决定的约定……

标签： angular angular-directive ngfor

【解决方案1】：

方括号 [x] 用于属性绑定，而 (x) 用于事件绑定。

虽然 *ngFor,*ngIf 是指令而不是绑定，但它们给出了这样的语法。

【讨论】：

【解决方案2】：

首先你必须明白括号符号[]在Angular中用于property binding。

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

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

在这种情况下，[hero]="hero" 中的[hero] 是属性绑定的一个示例，其中数据将从数据源（组件）单向流动到视图（HTML）。您将找到的属性hero 使用@Input decorator 在该组件的输入属性中定义。

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

为什么 *ngFor 不需要括号？

答案正是您的想法。由于存在星号 (*)，您不需要为 *ngFor 使用 [括号表示法]。星号是 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 最终被视为需要属性绑定的任何其他属性。然而，由于它是一个内置指令，Angular 为我们提供了一种更简洁的简写符号。与我们自己创建和定义的 hero 属性不同，因此要求我们在 HTML 中显式使用括号表示法。不要忘记即使您可以将括号符号与结构指令一起使用，您也应该always prefer the asterisk。

【讨论】：