角度材料2 MatMenu – 动态创建
我需要动态创建一堆MdMenu.到目前为止,我不知道我怎么能:
1 – 动态创建模板引用变量(对于md菜单组件) 2 – 引用动态创建的变量(在触发器的[mdMenuTriggerFor]属性中使用) 我搜索了一下,却一无所获. 有人管理过吗? [编辑]:刚才有个主意.我在想:将触发器和md菜单封装在一个组件中(模板引用变量是组件范围的,因此不存在冲突),并通过使用单向数据绑定将必要的参数传递给该组件.这在巴西有点晚了,但我打算明天再试. 解决方法
解决了在Angular自定义组件中封装MdMenu和关联的触发器的问题.
场景:必须在表格中显示一系列对象.该表的最后一列必须显示MdMenu有两个选项:编辑和删除. 所以我创建了一个自定义角度组件,其中只包含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,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模板变量隔离开来. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |