Angular动态菜单

Question

我下面有一个垫子菜单，每个菜单都有自己的点击值和自己的禁用属性，有没有一种方法可以清晰地实现这个或动态地实现这个，而不重复按钮和点击，正如你在下面看到的当前进度?比如dynamic

#代码

<mat-menu #createDealMenu="matMenu" xPosition="before" yPosition="below">
<button [disabled]="!testID" (click)="createDeal(DEAL_TYPES.AC)" mat-menu-item>Portfolio Management - Approval to Close</button>
<button [disabled]="!pmRId" (click)="createDeal(DEAL_TYPES.PMT)" mat-menu-item>Portfolio Management - Termination Option</button>
<button [disabled]="!leaseId" (click)="createDeal(DEAL_TYPES.PMR)" mat-menu-item>{{DEAL_TYPES.PMR}}</button>
</mat-menu>

Answer 1

在你的组件逻辑中，必须有一个包含所有参数和信息的对象，以便填充垫子菜单。

像这样:

public menuItems: any[]; // Would be nice to create an interface or something to deal with the types
.. code ...
// Inside the ngOnInit():
this.menuItems = [
{ disabledCondition: !this.testID, dealType: 'AC', buttonText: 'Portfolio Management - Approval to Close'
]

那么现在我们在数组中有了一个元素，我们将使用ngFor指令来遍历数组，并显示我们想要的所有元素。

HTML文件:

<mat-menu #createDealMenu="matMenu" xPosition="before" yPosition="below">
<button *ngFor="let item of menuItems" 
[disabled]="item.disableCondition"
(click)="createDeal(DEAL_TYPES[item.dealType])" mat-menu-item
> 
{{ item.buttonText }}
</button>
</mat-menu>

这样的东西可能适合你