将数据传递到 mat-menu

Question

我的“真棒”菜单：

<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 matMenuContent let-data="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调用的'app-menu'. 这是通过键入[matMenuTriggerFor]="app-menu".

接下来我们要做的是mat-menu通过这个指令将组件的成员数据传递给：[matMenuTriggerData]="menuData"。mat-menu我们命名的实例app-menu现在可以获取该成员数据的内容。

如您所见，<ng-template>访问了'menuData'我们命名为的属性'menuItems'。在<ng-template>增加了一个指针或别名到该属性（称为aliasMenuItems），像这样：<ng-template let-aliasMenuItems="menuItems">。现在我们可以在<ng-template>.

在我的示例中，我<button mat-menu-item></button>为组件menuData.menuItems数组中存在的每个菜单项对象创建一个元素，如下所示：

    <button mat-menu-item *ngFor="let item of aliasMenuItems">
      Item {{item.code}}: {{item.name}}
    </button>

我希望你觉得这个答案有用。