动态设置菜单内容

时间:2019-02-15 19:34:38

标签: typescript angular6 angular-material-6

我有一个angular6材质的垫子桌子,其中一列包含按钮触发垫子菜单。我希望它根据{{server.status}}列值显示不同的选项。我该怎么办?

<ng-container matColumnDef="status">
   <mat-cell *matCellDef="let server"> {{server.status}} </mat-cell>
</ng-container>
<ng-container matColumnDef="actions">
   <mat-cell *matCellDef="let server"> 
        <mat-icon [matMenuTriggerFor]="menu" class="clickable">more_vert</mat-icon>
         <mat-menu #menu="matMenu">
                 <button mat-menu-item>
                      <span>Optionset1</span>
                 </button>
         </mat-menu>
         <mat-menu #menu="matMenu2">
                 <button mat-menu-item>
                       <span>Optionset2</span>
                 </button>
         </mat-menu>
    </mat-cell>
</ng-container>

1 个答案:

答案 0 :(得分:0)

嗯,我做到了。我用* ngIf语句。我把它放在这里给任何想找答案的人

                <div *ngIf="server.status == 'ONLINE'">
                    <mat-icon [matMenuTriggerFor]="menu" class="clickable"></mat-icon>
                </div>
                <div *ngIf="server.status == 'OFFLINE'">
                    <mat-icon [matMenuTriggerFor]="menu2" class="clickable" ></mat-icon>
                </div>
                <mat-menu #menu="matMenu">
                    <button mat-menu-item>
                        <span>Option1</span>
                    </button>
                </mat-menu>
                <mat-menu #menu2="matMenu">
                    <button mat-menu-item>
                        <span>Option2</span>
                    </button>
                </mat-menu>