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.
有人管理吗?
推荐答案
通过将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.
因此,我制作了一个自定义角度组件,其中仅包含MdMenu及其触发器.该组件使用双向数据绑定来接收必须编辑/删除的对象,然后执行所需的操作:
So I made a custom angular component containing just the MdMenu 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>
,它只会为模板变量创建一个作用域(
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
模板变量都是唯一的,与*ngFor
循环创建的其他 #menu
模板变量完全隔离.
Interestingly, each #menu
template variable above will be unique, fully isolated from the others #menu
template variables created by the *ngFor
loop.
[UPDATE] :事实上,您可以删除<ng-container>
并直接在<tr>
元素上使用*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屋!