angular - 将数据传递给 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-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>

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