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

【问题标题】：How to access an enum value in an Angular 5 view如何在 Angular 5 视图中访问枚举值
【发布时间】：2018-10-25 16:56:17
【问题描述】：

我目前在 html 视图中直接引用 enum int 值，但我更愿意通过枚举名称引用 - 例如，就像我在 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>

在我的组件中，我正在设置 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 值本身。

可以吗？

感谢和问候。

【问题讨论】：

NodeType[NodeType.HostService] 见：stackoverflow.com/questions/18111657/…

标签： angular

【解决方案1】：

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

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

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

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

请参阅this stackblitz 以获取演示。

【讨论】：

不，我无法让它工作。我需要进一步调试。我也尝试了其他发帖者的建议NodeType[NodeType.HostService]
这么用的习惯：我想大家都忽略了=。 TY
我也无法使用导出的枚举在视图中进行条件检查。如果直接在视图中定义，它肯定会起作用。但是@bob.mazzo 已经导出了枚举。
@SQueek - 导出枚举是不够的。您必须将其分配给组件类的属性才能使其在模板中可用，因为模板的expression context 是组件实例。
@SQueek - 我没有在组件类中声明枚举。它在同一个文件中，但在组件类之外。我修改了the stackblitz 以显示在单独的文件中声明枚举时它是如何工作的。

【解决方案2】：

通过智能感知在 HTML 中使用枚举的最简单方法

你的枚举

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>

【讨论】：

【解决方案3】：

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

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

在 html 模板中这样称呼它：

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

当你声明的枚举是这样的：

    export enum Action {
  update, create
}

【讨论】：