如何在Angular 5视图中访问枚举值

32 浏览
0 Comments

如何在Angular 5视图中访问枚举值

我目前在我的html视图中直接引用enum int值，但我更喜欢按枚举名称引用-例如我在TypeScript代码中所做的那样

 if (this.nodeType === NodeType.HostService) {
      ...
 }

我定义了一个枚举:

export enum NodeType {
    Location,
    Host,
    HostAccessPoint,
    HostStorage,
    HostService
}

在我的html视图中，我使用以下方式在模态框中加载特定组件（包括响应式表单），这完全取决于enum值:

在我的组件中，我正在设置that.selectedNodeTypeEnum：

export class ConfigNetworkTreeComponent implements OnInit {
  selectedNode: INode;
  selectedNodeTypeEnum: NodeType = null;
  selectedNodeTypeStr: string;
  setNodeEvents() {
   let selectedObj = that.getSelectedNode(nodeID);        
   that.selectedNode = selectedObj['selectedNode'];						
   that.selectedNodeTypeStr = selectedObj['nodeType'];
   that.selectedNodeTypeEnum = NodeType[that.selectedNodeTypeStr];
  }
  ...
}

底线是我更喜欢在html中使用这种编码样式：

*ngIf="selectedNode && selectedNodeTypeEnum===NodeType.HostService"

而不是直接引用枚举int值。

可以做到吗?

谢谢和问候。

admin 更改状态以发布 2023年5月21日
0

2 答案

0 Comments

使用 intellisense 在 HTML 中最简单的使用 enum 的方法

您的 enum

export enum NodeType {
    Location,
    Host
}

您的组件类

export class YourComponent {
    get Node() {
       return NodeType
    }
}

您组件的HTML

{{Node.Location}} // 0
Location

0
0 Comments

由于模板的表达式上下文是组件实例，因此您应该将 NodeType 枚举分配给组件类的属性，以便在模板中可用：

export class ConfigNetworkTreeComponent {
  public NodeTypeEnum = NodeType;  // Note: use the = operator
  ...
}

然后，您可以在模板中使用该属性引用 NodeType 值：

*ngIf="selectedNode && selectedNodeType === NodeTypeEnum.HostService"

请参见 此 stackblitz 进行演示。

0