有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>