Question

我目前正在enum视图中直接引用html int值，但我更愿意通过枚举名称引用 - 例如，就像我在TypeScript代码中那样

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

我将枚举定义为：

＆＃13;

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

＆＃13;

在我的html视图中，我在一个模态中加载特定组件（包括反应形式），如下所示 - 这一切都取决于enum值：

＆＃13;

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

＆＃13;

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

＆＃13;

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];
  
  }
  ...
}

＆＃13;

底线是我宁愿在html中使用这种编码方式：

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

而不是引用enum int vaue本身。

可以吗？

感谢和问候。

Answer 1

由于模板的expression context是组件实例，因此您应该将NodeType枚举分配给组件类的属性，以使其在模板中可用：

export class ConfigNetworkTreeComponent {
  public nodeType = NodeType;
  ...
}

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

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

请参阅this stackblitz了解演示。

Answer 2

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

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 3

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

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>

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

3 个答案: