How to access an enum value in an Angular 5 view

问题:

I am currently referencing the enum int value directly in my html view, but I would prefer to reference by the enum name - for example, as I do in TypeScript code

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

I have an enum defined as:

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

and in my html view, I'm loading specific components (which include reactive forms) within a modal as follows - and it all depends up on the enum value:

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

In my component I'm setting 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];
  
  }
  ...
}

Bottom line is that I would rather use this style of coding in the html:

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

as opposed to referencing the enum int vaue itself.

Can it be done ?

thanks and regards.

回答1:

Since the expression context of the template is the component instance, you should assign the NodeType enum to a property of the component class to make it available in the template:

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

You can then use that property in the template to refer to NodeType values:

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

See this stackblitz for a demo.

回答2:

You can create a method for returning string representation of enum element in your component, like:

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

And in html template call it like:

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

When your declared enum is like:

    export enum Action {
  update, create
}

回答3:

Simplest way to use enum in view

export enum NodeType {
    Location,
    Host
}

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

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