角度4のマットカードを完全にクリックすると、含まれているマットメニューを開くことができます

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

*ngForでコントローラの要素にmatMenuTriggerForを追加することで何か問題があるのでしょうか？以前は*にありましたが、トリガ要素ではなかったいくつかの問題がありました。

mat-cardタグ自体の中にあり、それが解決するかどうかを確認するためにメニュートリガーを追加するだけで、マットカードの内容をラップするテストdivを挿入しようとする価値があります。

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