如何隐藏上下文菜单中的div / template元素

Question

我正在使用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 /模板在此先感谢。

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

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