有Angular 4 mat卡完全可點擊打開包含mat-menu

Question

我想讓我的整個mat-card可點擊打開mat-menu即可能被包含在內。我有邏輯顯示不同的卡片內容取決於一些值。卡內容可以有一個mat-menu或沒有它。

<mat-card *ngFor="let card of cards"> 
    <div *ngIf="!card.hasMenu">{{card.name}}</div> 
    <div *ngIf="card.hasMenu"> 
     <button mat-icon-button [matMenuTriggerFor]="menu"> 
      {{card.name}} 
     </button> 
     <mat-menu #menu="matMenu"> 
      <button *ngFor="let amenu of card.menus" mat-menu-item> 
       <span>{{amenu.name}}</span> 
      </button> 
     </mat-menu> 
    </div> 
</mat-card> 

如果我穿上mat-card[matMenuTriggerFor]="menu"我得到一個錯誤ERROR Error: mat-menu-trigger: must pass in an mat-menu instance.

如何讓我的mat-card完全可點擊打開菜單嗎？

Answer 1

我想知道是否存在一些問題，您將matMenuTriggerFor添加到控制器的*ngFor？我以前遇到過一些問題* ngIf在mat-menu上，但不在觸發元件上。

可能值得嘗試插入一個測試div，它只包含mat-card內容，但是位於mat-card標記本身內，並在其中添加菜單觸發器以查看是否解決該問題。

<mat-card *ngFor="let card of cards"> 
    <div [matMenuTriggerFor]="menu"> <!-- YOUR TESTING DIV --> 
    <div *ngIf="!card.hasMenu">{{card.name}}</div> 
    <div *ngIf="card.hasMenu"> 
     <button mat-icon-button> 
      {{card.name}} 
     </button> 
     <mat-menu #menu="matMenu"> 
      <button *ngFor="let amenu of card.menus" mat-menu-item> 
       <span>{{amenu.name}}</span> 
      </button> 
     </mat-menu> 
    </div> 
    </div> 
</mat-card>