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>

如果我将[matMenuTriggerFor]="menu"放在mat-card上，我会收到错误ERROR Error: mat-menu-trigger: must pass in an mat-menu instance.

如何让mat-card完全可点击以打开菜单？

Answer 1

我想知道将matMenuTriggerFor添加到*ngFor控件的元素中是否存在问题？之前我遇到过一些问题，* ngIf位于mat-menu而不是触发元素上。

可能值得尝试插入一个仅包装mat-card内容的测试div，但是在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>

让Angular 4 mat-card完全可点击以打开包含的mat-menu

1 个答案: