Question

我的“很棒”菜单：

Me.refresh

第一个问题是可以吗？编写了以下文档，但是<mat-menu #appMenu="matMenu"> <ng-template matMenuContent let-myobject="myobject"> <button mat-menu-item>Delete {{myobject.name}}</button> <button mat-menu-item>Smth else</button> </ng-template> </mat-menu> <button mat-icon-button [matMenuTriggerFor]="appMenu" [matMenuTriggerData]="{myobject: myobject}"> <mat-icon>more_vert</mat-icon> </button>和let-myobject="myobject"看起来像是开销（？）

第二个问题是，是否要基于{myobject: myobject}计算一些数据-我该怎么做？我希望在打开菜单之前进行计算。

myobject-无法完成这项工作或类似工作

[matMenuTriggerData]="getData(myobject)"-无法完成这项工作或类似工作

我知道我可以在这里用ng-template替换元件，但是例如我需要在此组件中执行10个输出的10个菜单项。（或我不能...）

Answer 1

您当然可以通过使用matMenuTriggerData指令将对象传递到mat-menu。该对象可以包含单个值，另一个对象，甚至可以是值或对象的数组。这是我解决的方法：

我的挑战是：我想根据数组的内容动态构建菜单项列表（mat-menu-item）。我如何设法将对象数组传递给我的mat-menu？

在组件类中，您可以定义对象数组：

export class MyComponent implements OnInit {
  menuData: any;

  ngOnInit() {
    this.menuData = {
      menuItems: [
        {code: '1', name: 'first'},
        {code: '2', name: 'second'}
      ]
    };
  }
}

请注意，我将传递给用于打开matMenuTriggerData内容的按钮的mat-menu指令的对象是名为menuData的数据成员。该成员只有一个属性，它是一组对象。这些代表我要显示在模板中的实际菜单项。模板如下所示：

<mat-menu #app-menu="matMenu">
  <ng-template matMenuContent let-aliasMenuItems="menuItems">
    <button mat-menu-item *ngFor="let item of aliasMenuItems">
      Item {{item.code}}: {{item.name}}
    </button>
  </ng-template>
</mat-menu>
<button mat-icon-button [matMenuTriggerFor]="app-menu" [matMenuTriggerData]="menuData">
  <mat-icon>more_vert</mat-icon>
</button>

让我解释一下模板中发生的情况：模板底部定义的按钮已链接到名为mat-menu的{{1}}。可以通过键入'app-menu'来完成。

我们下一步要做的是通过以下指令将组件的成员数据传递到[matMenuTriggerFor]="app-menu"：mat-menu。我们命名为[matMenuTriggerData]="menuData"的{{1}}实例现在可以获取该成员数据的内容。

如您所见，mat-menu访问我们已命名为app-menu的{{1}}的属性。 <ng-template>向该属性添加一个指针或别名（称为'menuData'），如下所示：'menuItems'。现在，我们可以遍历<ng-template>中定义的菜单项数组。

在我的示例中，我为组件的aliasMenuItems数组中存在的每个菜单项对象创建一个<ng-template let-aliasMenuItems="menuItems">元素，如下所示：

<ng-template>

我希望这个答案对您有用。

将数据传递到菜单

1 个答案: