mat-selection-list搭配*ngFor在mat-menu中无法渲染数组数据的问题求助

嘿，这个问题我之前也踩过坑！核心原因是变量名冲突导致的：

你在模板里给子菜单定义了模板引用变量<mat-menu #items="matMenu">，这个#items会优先覆盖你组件类里定义的同名items数组。当*ngFor="let item of items"执行时，它遍历的不是你预期的字符串数组，而是matMenu对象——这就是为什么会抛出NgFor only supports binding to Iterables such as Arrays的错误。

快速修复方案 #

只需要给模板引用变量换个不重复的名字就行：

1. 把子菜单的#items改成#itemsMenu（或者其他你喜欢的名字）
2. 同步修改触发子菜单的[matMenuTriggerFor]="itemsMenu"

修改后的完整代码如下：

组件代码（保持不变） #

export class AppComponent implements OnInit { 
  items: string[] = ['item1', 'item2', 'item3'] 
  constructor(){} 
}

修改后的模板代码 #

<button [matMenuTriggerFor]="settings">打开菜单</button>
<mat-menu #settings="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="itemsMenu">Items</button>
</mat-menu>
<mat-menu #itemsMenu="matMenu">
  <mat-selection-list>
    <mat-list-option *ngFor="let item of items" [value]="item"> {{item}} </mat-list-option>
  </mat-selection-list>
</mat-menu>

这样改完之后，*ngFor就能正确找到组件类里的items数组，正常渲染出所有选项了。

另外解释下为什么手动添加选项没问题：因为手动写的时候没有用到items变量，自然不会触发变量名冲突的问题，只有用*ngFor绑定items时才会暴露这个问题。

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