时间戳

首页 > 解决方案 > mat-selection-list 不适用于 *ngFor

angular - mat-selection-list 不适用于 *ngFor

问题描述

我正在尝试使用 mat-selection-list 作为 mat-menu 中的选项：

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

<button [matMenuTriggerFor]="settings">
<\button>

<mat-menu #settings="matMenu">
   <button mat-menu-item [matMenuTriggerFor]="items">Items<\button>
<\mat-menu>

<mat-menu #items="matMenu">
   <mat-selection-list>
      <mat-list-option *ngFor="let item of items" [value]="item">
         {{item}}
      <\mat-list-option>
   <\mat-selection-list>
<\mat-menu>

当我单击按钮时，会出现菜单，其中可以选择元素“项目”。item1在“项目”中，我希望看到项目列表item2和item3. 但是，没有显示任何内容并引发以下错误：

Error: Cannot find a differ supporting object [object Object] of type 'object'. NgFor only supports binding to Iterables such as Arrays.

我的阵列怎么items不适合 ngFor？我错过了什么？如果我手动添加每个 mat-list-option，则该列表会正确填充，但是使用 ngFor 它会给我带来问题。

标签： angularangular-materialngfor

解决方案

我看到两个可能的问题：

1.您使用#settings="matMenu"and#items="matMenu"将两者的值设置为settings和items的相同引用matMenu，这可能不是您想要的。从文档：

Angular 如何为模板变量赋值
……
如果变量在右侧指定了一个名称，例如#var="ngModel"，则该变量指的是元素上具有匹配 exportAs 名称的指令或组件。

https://angular.io/guide/template-reference-variables#how-angular-assigns-values-to-template-variables

你应该只使用#settingsand #items。然而...

2.#items在您的模板中将覆盖items: string[]您的组件中的。<mat-menu>为您的元素选择一个不同的变量名称——#itemsMenu例如，也许。

推荐阅读