Angular新@for循环在NzDropdown中报错，*ngFor可正常运行

问题根源 #

你在模板里给<nz-dropdown-menu>定义了模板引用变量#menu="nzDropdownMenu"，这和组件类里的@Input() menu: string[]重名了。在Angular的模板作用域中，模板引用变量的优先级高于组件类的属性，所以@for (item of menu; track $index)里的menu指向的是NzDropdownMenuComponent实例，而非你传入的字符串数组——这就是报错的核心原因：组件实例没有迭代器（Symbol.iterator），无法被循环遍历。

至于旧的*ngFor能正常运行，是因为Angular对两种循环语法的作用域解析逻辑存在差异，属于偶然能工作的场景，绝对不能依赖这种行为。

解决方案 #

方案1：修改模板引用变量名（推荐） #

把模板里的#menu改成其他名称，避免和输入属性重名：

<nz-dropdown-menu #dropdownMenu="nzDropdownMenu">
  <ul nz-menu>
    @for (item of menu; track $index) {
      <li nz-menu-item (click)="menuItemclicked(item)">
        {{ item }}
      </li>
    }
  </ul>
</nz-dropdown-menu>

方案2：修改输入属性名 #

如果不想改模板变量，也可以调整组件的输入属性名称，比如改成menuItems：
组件类代码：

@Input() public menuItems: string[] = []

模板代码：

<nz-dropdown-menu #menu="nzDropdownMenu">
  <ul nz-menu>
    @for (item of menuItems; track $index) {
      <li nz-menu-item (click)="menuItemclicked(item)">
        {{ item }}
      </li>
    }
  </ul>
</nz-dropdown-menu>

两种方案都能彻底解决问题，优先选方案1，因为不会改变组件对外的输入接口，更符合代码的兼容性要求。

内容的提问来源于stack exchange，提问作者Redhewlett