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


How to access an enum value in an Angular 5 view

我目前在我的html视图中直接引用enumint值，但我更喜欢用枚举名称引用，例如，我在typescript代码中这样做。

1
2
3
 if (this.nodeType === NodeType.HostService) {
      ...
 }

我有一个枚举定义为：

1
2
3
4
5
6
7
export enum NodeType {
    Location,
    Host,
    HostAccessPoint,
    HostStorage,
    HostService
}

在我的HTML视图中，我在一个模式中加载特定的组件(包括反应形式)，如下所示——这一切都取决于enum值：

1
2
3
4
5
6
7
8
9
      <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>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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中使用这种类型的编码：

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

而不是引用枚举int-vaue本身。

能做到吗？

谢谢和问候。

相关讨论

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

1
2
3
4
export class ConfigNetworkTreeComponent {
  public nodeType = NodeType;
  ...
}

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

1
*ngIf="selectedNode && selectedNodeType === nodeType.HostService"

看看这个StackBlitz的演示。

相关讨论

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

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

在HTML模板中称之为：

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

当声明的枚举类似于：

1
2
3
    export enum Action {
  update, create
}

在视图中使用枚举的最简单方法

1
2
3
4
5
6
7
8
9
10
11
export enum NodeType {
    Location,
    Host
}

export class VersionDetailsComponent implements OnInit {
  NodeType: any = NodeType
}

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