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

Question

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

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

我有一个枚举定义为：

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

在我的html视图中，我在一个模式中加载特定组件（包括反应式表单），如下所示——这完全取决于enum值：

<div class="modal-body">
      <config-edit-storage-node *ngIf="selectedNode && selectedNodeTypeEnum===3" 
                        [node]="selectedNode" [nodeType]="selectedNodeTypeEnum" 
                        (cancelEdit)="cancelEdit()" (saveEdit)="onSaveEdit($event)">
        </config-edit-storage-node>
        
        <config-edit-service-node *ngIf="selectedNode && selectedNodeTypeEnum===4"
                        [node]="selectedNode" [nodeType]="selectedNodeTypeEnum" 
                        (cancelEdit)="cancelEdit()" (saveEdit)="onSaveEdit($event)">
        </config-edit-service-node>
        
</div>

在我的组件中，我正在设置。SelectedNodeTypeNum：

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"

而不是引用枚举值本身。

能做到吗？

谢谢和问候。

Answer 1

您可以创建一个方法，用于返回组件中枚举元素的字符串表示形式，如：

getActionName(): string {
    return Action[this.action];
  }

在html模板中，将其称为：

 <button type="submit" [disabled]="!userProfileForm.valid" class="btn btn-danger">
            {{getActionName()}}</button>

当您声明的枚举类似于：

    export enum Action {
  update, create
}

Answer 2

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

你的枚举

export enum NodeType {
    Location,
    Host
}

您的组件类

export class YourComponent {

    get Node() {
       return NodeType
    }

}

你的组件是HTML

<div>{{Node.Location}}</div> // 0
<span *ngIf="Node.Location == 0">Location</span>

Answer 3

由于模板的表达式上下文是组件实例，因此应将节点类型枚举分配给组件类的属性，以使其在模板中可用：

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

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

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

请看这个stackblitz的演示。