如何在上下文菜单中隐藏 div/模板元素答案

【问题标题】：How to hide the div/template element in the context menu如何在上下文菜单中隐藏 div/模板元素
【发布时间】：2019-04-02 08:28:21
【问题描述】：

我正在使用 shcontextmenu，我需要根据条件隐藏元素/模板。

我已经尝试使用 let-data 如下代码所示

<sh-context-menu #menu>
    <ng-template shContextMenuItem let-data (click)="onRightClick($event, 'add')" >
        <div *ngIf="data.type === 'ice'">
            Add ice
        </div>
    </ng-template>
    <ng-template shContextMenuItem let-data (click)="onRightClick($event, 'delete')">
        <div *ngIf="data.type === 'ice'">
            Delete ice
        </div>
    </ng-template>
    <ng-template shContextMenuItem let-data (click)="onRightClick($event, 'removeProduct')">
        <div *ngIf="data.type !== 'ice'">
            Remove ice
        </div>
    </ng-template>
</sh-context-menu>

当条件满足时，它只隐藏文本，如果我将鼠标悬停在它上面，我可以看到带有蓝色背景的空元素。请帮助如何隐藏整个 div/模板提前致谢。

【问题讨论】：

标签： contextmenu angular2-template angular7

【解决方案1】：

您实际上是在此处隐藏 div 而不是 template，请进行如下更改

<sh-context-menu #menu>
  <div *ngIf="data.type === 'ice'">
   <ng-template shContextMenuItem let-data (click)="onRightClick($event, 'add')" >
        Add ice
   </ng-template>
  </div>
  <div *ngIf="data.type === 'ice'">
    <ng-template shContextMenuItem let-data (click)="onRightClick($event, 'delete')">
        Delete ice
    </ng-template>
  </div>
  <div *ngIf="data.type !== 'ice'">
     <ng-template shContextMenuItem let-data (click)="onRightClick($event, 'removeProduct')">
        Remove ice
     </ng-template>
  </div>
</sh-context-menu>

我希望这能解决您的问题。 :)

【讨论】：