Question

据我所知，我们在javascript中使用var和let进行变量声明，唯一的区别是var的范围限定为当前函数，而let获取范围限定为当前块。因此，如果我在任何地方使用var而不是let，它应该可行。但是在下面的代码中......

<li *ngFor="let fruit of fruits">
   {{ fruit}}
</li>

...如果我使用var则会出错。

<li *ngFor="var fruit of fruits">
   {{ fruit}}
</li>

错误：未捕获（在承诺中）：错误：模板解析错误：解析器错误：在[水果的var fruit]中的第1列出现意外的标记变量 ng：///AppModule/AppComponent.html@4：4（“

有人可以告诉我为什么会这样吗？

Answer 1

您在此处输入的表达式实际上不是javascript（或打字稿），而是一个角度表达式。

您可以在此处执行JS或TS中无法实现的其他操作，例如使用管道（*ngFor="contacts | async"）。

在幕后，这只是语法糖，如下所示：

 <ng-template ngFor let-contact [ngForOf]="contacts | async">

请参阅https://toddmotto.com/angular-ngfor-template-element#ngfor-and-ng-template

Answer 2

在上一个答案中添加一些细节。我在角度文档

中对let与*ngFor的用法有一些解释

链接https://angular.io/guide/template-syntax#ngfor

分配给* ngFor的文本是指导该文本的指令   转发过程。

* ngFor microsyntax分配给* ngFor的字符串不是模板表达式。它是一种微观的语法 - 它本身就是一种语言   角度解释。字符串“让英雄的英雄”意味着：

将英雄数组中的每个英雄存放在本地英雄循环中   变量，并使其可用于每个的模板化HTML   迭代。

Angular将此指令转换为   主机元素，然后重复使用此模板来创建新集   列表中每个英雄的元素和绑定。

英雄之前的let关键字创建一个名为的模板输入变量   英雄。 ngFor指令迭代返回的英雄数组   父组件的英雄属性并将英雄设置为当前   每次迭代时数组中的项目。

为什么不能使用var而不是在ngFor中使用

2 个答案: