Angular Material 2 MatMenu - 动态创建 [英] Angular Material 2 MatMenu - Dynamically creation

问题描述

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

I need to dynamically create a bunch of MatMenu. So far I have no idea of how I can:

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

1 - Create a template reference variable dynamically (for the mat-menu component)

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

2 - Reference the dynamically created variable (to use in the [matMenuTriggerFor] attribute of the trigger)

我搜索了一点，但一无所获.

I've searched a little and found nothing about it.

是否有人设法处理它?<​​/p>

Does anyone manage do deal with it?

推荐答案

通过将 MatMenu 和相关触发器封装在一个 Angular 自定义组件中解决.

Solved by encapsulating the MatMenu and the associated trigger in an Angular custom component.

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

Scenario: There's an array of objects that must be shown in a table. The last column of the table must show the MatMenu with two options: Edit and Delete.

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

So I made a custom angular component containing just the MatMenu and its trigger inside it. This component uses two-way data bind to receives the object that must be edited/deleted and proceed with the desired action:

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

• If the purpose is to edit, shows a dialog to edit the data

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

If the purpose is to delete, it deletes the data

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

Once the action is completed, the host of the custom component must perform one of two actions:

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

1 - update the array replacing/deleting the edited/removed element

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

2 - update the entire array, asking for all its forming data again from the server

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

In both cases, you'll have to monitor the changes and do any updates in the array whenever the update/deletion is finished. An alternative is to create another two-way data bound variable and pass the entire array as a two-way data-bound parameter to the custom component.

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

I built up this Stackblitz to better show it: 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):**

Another approach

There's one more way to do it: you can use <ng-container> and it will just create a scope for your template variable (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 循环创建的模板变量.

Interestingly, each #menu template variable above will be unique, fully isolated from the others #menu template variables created by the *ngFor loop.

[UPDATE]:事实上，你可以去掉，直接使用*ngFor在 元素和 #menu 模板变量上.隔离作用域的创建方式与上述相同.但是我认为 ng-container 的存在对于有角度的新用户来说更容易理解，所以我决定保留这个答案.

[UPDATE]: As a matter of fact, you can drop the <ng-container> and use the *ngFor directly on the <tr> element along with the #menu template variable. The isolated scope will be created in the same way as described above. But as I think it's more comprehensible for angular new users the presence of ng-container, I decided to keep it on this answer.

这篇关于Angular Material 2 MatMenu - 动态创建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！