为啥不能在 ngFor 中使用 var 而不是 let

Posted 2023-02-22

【中文标题】为啥不能在 ngFor 中使用 var 而不是 let

【英文标题】：Why can't var be used instead of let in ngFor为什么不能在 ngFor 中使用 var 而不是 let

【发布时间】：2018-01-06 14:40:04

【问题描述】：

据我所知，我们在 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 of fruits] 中的第 1 列出现意外的令牌 var ng:///AppModule/AppComponent.html@4:4 ("

谁能告诉我为什么会这样？

【问题讨论】：

嗯，在角度渲染代码中，你不能这样做......

【参考方案1】：

您在此处输入的表达式并不是真正的 javascript（或 typescript），而是一个角度表达式。

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

在底层，这只是类似这样的语法糖：

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

见https://toddmotto.com/angular-ngfor-template-element#ngfor-and-ng-template

【讨论】：

但在打字稿中var关键字也有效吗？

是的，因为任何有效的 JS 文件也是有效的 TS 文件（TS 是 JS 的超集）。

这是实现 *ngFor 的两种不同方式，但并不是将 '*ngFor' 转换为 ng-template。即使您分享的文章也很棒，但没有提到这样的事情，也没有在 Angular 文档中提到。

@manishkumar 在此处查看文档：angular.io/guide/structural-directives#inside-ngfor - 它说“Angular 以类似的方式将 *ngFor 从星号 (*) 语法通过模板属性转换为 元素。”

@Vineesh 这是一个有效的关键字，尽管您可能希望在默认情况下使用 const 并在需要突变时使用 let（并避免使用 varaltogether）。这样你就可以从关于范围的更理智的语义中获益。见github.com/Platypi/style_typescript#use-of-var-let-and-const

【参考方案2】：

在上一个答案中添加一些细节。我对角度文档中let 和*ngFor 的用法得到了一些解释

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

分配给 *ngFor 的文本是指导 中继器进程。

*ngFor 微语法 分配给 *ngFor 的字符串不是模板表达式。它是一种微语法——它自己的一种小语言 角度解释。字符串“let hero of hero”的意思是：

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

Angular 将此指令翻译成围绕 宿主元素，然后重复使用此模板创建一个新集合 列表中每个英雄的元素和绑定。

hero 之前的 le​​t 关键字创建了一个名为 英雄。 ngFor 指令遍历由返回的英雄数组 父组件的 heros 属性并将 hero 设置为当前 在每次迭代期间从数组中提取项目。