При добавлении меню «Угловой материал» в таблицу «Угловой режим» возникает проблема с производительностью. Угловая таблица материалов с тысячами строк создает тысячи составляющих меню. Из-за этого загрузка страницы занимает слишком много времени.
Это мой пример кода.
<table>
<tr *ngFor="let el of [1,2,3,4,5]">
<td>Text line of menu {{el}}</td>
<td style="width: 5%">
<button mat-icon-button [matMenuTriggerFor]="abc.menu" class="center-block">
<i class="material-icons">more_vert</i>
</button>
<app-desposition #abc="menuComponent" [user]="row.policyObj"></app-desposition>
</td>
</tr>
</table>
<app-desposition>
- это другой угловой компонент с шаблоном mat-menu.
Это шаблон <app-desposition>
<mat-menu #menu="matMenu" class="d-menu-container">
<div class="desposition-menu">
<div (click)="$event.stopPropagation()">
<mat-input-container class="col-md-12">
<textarea [(ngModel)]="message" matInput id="message" name="body" rows="2" placeholder="Click here to write comment"></textarea>
</mat-input-container>
</div>
<mat-radio-group [(ngModel)]="selectedDesposition" (click)="$event.stopPropagation()">
<div mat-menu-item *ngFor="let menu of menuItems">
<mat-radio-button class="radioText" [value]="menu.getName()">
<span class="wrap-mat-radio-label" style="font-style:unset; font-size: 12px">{{menu.getName()}}</span>
</mat-radio-button>
</div>
</mat-radio-group>
</div>
<div mat-menu-item (click)="$event.stopPropagation()">
<span *ngIf="uiStatus.getSuccess() else uiElse" style="text-color:green">{{uiStatus.getMessage()}}</span>
<ng-template #uiElse><span style="text-color:red">{{uiStatus.getMessage()}}</span></ng-template>
</div>
<div mat-menu-item (click)="$event.stopPropagation()">
<button mat-raised-button color="warn" style="width:100%" (click)="onSelect()">
SAVE
</button>
</div>
</mat-menu>
Я хочу, чтобы компонент депонирования создавался динамически (я могу это сделать), но я не знаю, как прикрепить [matMenuTriggerFor] к меню, которое находится внутри динамически создаваемого компонента.
Пожалуйста, кто-нибудь поможет?
Для справки @jpavel сделал что-то похожее на меня на stackbliz. Вот ссылка.
Угловой материал 2 MatMenu - Динамическое создание