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

Posted 2023-03-13

【中文标题】如何在 Angular 5 视图中访问枚举值

【英文标题】：How to access an enum value in an Angular 5 view

【发布时间】：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] 见：***.com/questions/18111657/…

【参考方案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