如何有条件地在 ngx-contextmenu 中显示选项？

Question

我在我的 Angular 6 项目中使用 ngx-contextmenu 实现了上下文菜单。仅当所选对象定义了指定属性时，我才想在此菜单中显示一些选项。例如 - 在 this example 中，只有当项目定义了 otherProperty?

时，我才能显示 "Say hi!" 选项

我看到 <ng-template *ngIf="$event.item.otherProperty" 不能在 right-click.component.html". Should I define two components extendingRightClickComponentand select the proper one inAppComponent.onContextMenu()` 中使用？

Answer 1

下次我应该更好地阅读documentation。 ;) ngx-contextmenu 已实现 showing/hiding 特定项目的可能性。它可以通过 visible 输入参数来完成，例如;

HTML 模板：

<ng-template [visible]="showOption" contextMenuItem let-item>
   Say hi!
</ng-template>

component.ts 文件:

showOption(item: any) {
    return 'otherProperty' in item;
}

Answer 2

除了@trivelt的回答，如果你的组件中有一些变量你想在你的条件方法中使用（即：你收到的一些@Input来自父组件），使用如下代码：

showOption(item: any) {
return 'otherProperty' in item;
}

将不起作用，您将收到错误消息。在这种情况下正确的使用方法是这样的：

public outsideValue = "something"
public showOption = (item: any): boolean => {
  return item.type === this.outsideValue;
}

如何有条件地在 ngx-contextmenu 中显示选项？

How to show option in ngx-contextmenu conditionally?

contextmenu

angular