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

首先，您必须首先了解Angular中property binding使用的括号符号[]。

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

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

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

哪个带给我们您的问题：

为什么* 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。

Answer 2

括号[x]用于属性绑定，而（x）用于事件绑定。

虽然* ngFor，* ngIf是指令而不是绑定，但它们具有这种语法。

* ngFor为什么不需要括号？

2 个答案: