Question

我需要动态创建一堆MatMenu。到目前为止，我不知道我怎么做：

1 - 动态创建模板引用变量（对于mat-menu组件）

2 - 引用动态创建的变量（用于触发器的[matMenuTriggerFor]属性）

我已经搜索了一下，却一无所获。

有人管理过吗？

Answer 1

解决了封装MatMenu以及Angular自定义组件中的关联触发器的问题。

场景：必须在表格中显示一系列对象。表格的最后一列必须显示MatMenu有两个选项：编辑和删除。

所以我制作了一个自定义角度组件，其中只包含MdMenu及其触发器。此组件使用双向数据绑定来接收必须编辑/删除的对象，并继续执行所需的操作：

如果目的是编辑，则显示编辑数据的对话框
如果目的是删除，则会删除数据

成功完成操作后，自定义组件的主机必须执行以下两种操作之一：

1 - 更新数组替换/删除已编辑/删除的元素

2 - 更新整个阵列，再次从服务器询问其所有形成数据

在这两种情况下，只要更新/删除完成，您就必须监视更改并在数组中执行任何更新。另一种方法是创建其他双向数据绑定变量，并将整个数组作为双向数据绑定参数传递给自定义组件。

我建立了这个Stackblitz以更好地展示它：https://stackblitz.com/edit/repeating-menu-approach-1

<table>
  <tr *ngFor="let el of [1,2,3,4,5]">
    <td>Text line of menu {{el}}</td>
    <td style="width: 5%">
      <menu-overview-example [x]="el" (clickedItem)="hostClickHandler($event)"></menu-overview-example>
    </td>
  </tr>
</table>

另一种方法

实际上，还有一种方法可以实现：您可以使用<ng-container>，它只会为您的模板变量（https://stackblitz.com/edit/repeating-menu-approach-2）创建一个范围：**

<table>
  <ng-container *ngFor="let el of [1,2,3,4,5]">
    <tr>
      <td>Text line of menu {{el}}</td>
      <td style="width: 5%">
        <button mat-icon-button [matMenuTriggerFor]="menu">
          <mat-icon>more_vert</mat-icon>
        </button>
        <mat-menu #menu="matMenu">
          <button mat-menu-item (click)="clickHandler('Item 1 of Menu ' + el)">Menu {{el}}:Item 1</button>
          <button mat-menu-item (click)="clickHandler('Item 2 of Menu ' + el)">Menu {{el}}:Item 2</button>
        </mat-menu>
      </td>
    </tr>
  </ng-container>
</table>

有趣的是，上面的每个 #menu 模板变量都是唯一的，与{{1}创建的其他 #menu 模板变量成功隔离循环。

角度材料2 MatMenu - 动态创建

1 个答案:

另一种方法