Angular Material 2 MatMenu - 动态创建

Question

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

1 - 动态创建模板引用变量(用于 mat-menu 组件)

2 - 引用动态创建的变量(在触发器的 [matMenuTriggerFor] 属性中使用)

我搜索了一下，但一无所获。

有没有人设法处理它？<​​/p>

Answer 1

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

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

所以我制作了一个自定义 Angular 组件，其中仅包含 MatMenu及其内部的触发器。该组件使用双向数据绑定(bind)来接收必须编辑/删除的对象并继续执行所需的操作:

• 如果目的是编辑，显示一个对话框来编辑数据

• 如果目的是删除，则删除数据

操作完成后，自定义组件的宿主必须执行以下两个操作之一:

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

2 - 更新整个数组，再次从服务器请求它的所有形成数据

在这两种情况下，您都必须监视更改并在更新/删除完成时对数组进行任何更新。另一种方法是创建另一个双向数据绑定(bind)变量，并将整个数组作为双向数据绑定(bind)参数传递给自定义组件。

我建立了这个 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 上面的模板变量将是唯一的，与其他变量完全隔离 #menu *ngFor 创建的模板变量循环。

[更新]:事实上，您可以删除 <ng-container>并使用 *ngFor直接在<tr>元素以及 #menu模板变量。隔离范围将以与上述相同的方式创建。但是我认为对于 Angular 新用户来说，ng-container 的存在更容易理解。 ，我决定保留这个答案。