Передача данных в мат-меню

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

Вы, безусловно, можете передать объект в mat-menu с помощью директивы 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>

Надеюсь, вы найдете этот ответ полезным.