[ *ngFor ] 的属性名称必须是小写的 (attr-lowercase)

在使用 Angular 应用开发中，我们经常会使用到 [ *ngFor ] 指令来对数组进行遍历。在使用这个指令的时候，我们需要传入一些属性值来进行数据绑定，并且这些属性名称必须是小写的。

什么是 [ *ngFor ] 指令？

[ *ngFor ] 是一种 Angular 指令，用于对数组进行循环遍历显示。它的语法如下：

<element *ngFor="let item of array; let i = index">
  {{ item }}
</element>

其中，array 是要遍历的数组，item 是数组中的元素，i 是当前元素在数组中的索引。

为什么属性名称必须是小写的？

在使用 [ *ngFor ] 指令时，我们需要传入一些属性值来进行数据绑定。而在这些属性值的名称中，只能使用小写字母，不能使用大写字母。

这是因为在 HTML 中，属性名是区分大小写的。如果属性名中包含了大写字母，在解析 HTML 时就会出现错误。而使用小写字母作为属性名，可以避免这种问题的发生。

例如，在以下的示例代码中，将大小写字母混用会导致解析错误：

<ul>
  <li *ngFor="let item of items; Let i = index">
    {{ item }}
  </li>
</ul>

正确的写法应该是将属性名全部改成小写字母：

<ul>
  <li *ngFor="let item of items; let i = index">
    {{ item }}
  </li>
</ul>

如何避免遵循这个规范？

为了避免 [ *ngFor ] 属性名称大小写不一致的问题，我们可以选择使用 Angular 提供的 Lint 工具来检查代码中的问题。

我们可以在 VS Code 中安装 Angular 插件，启用 Lint 功能，并执行自动修复，来自动调整代码中的错误。

在 VS Code 中，我们可以使用如下命令来进行 Lint 操作：

ng lint --fix

在执行这个命令之后，Angular Lint 工具会自动检查代码并进行修复操作。这样我们就可以避免 [ *ngFor ] 属性命名不规范的问题，并保证代码质量。