如何在Angular 8+的HTML模板中比较和访问枚举变量？

32 浏览
0 Comments

如何在Angular 8+的HTML模板中比较和访问枚举变量？

我目前在我的html视图中直接引用了enum的int值，但我更希望通过枚举名称来引用 - 例如，在TypeScript代码中所做的那样

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

我定义了一个枚举：

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

在我的html视图中，我正在加载特定的组件（包括响应式表单）在一个模态框中，具体取决于enum的值：

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

这可以实现吗？

谢谢和问候。

0

3 答案

0 Comments

问题的原因是在Angular 8+的HTML模板中，无法直接比较和访问枚举变量。为了解决这个问题，可以在组件中创建一个方法，用于返回枚举元素的字符串表示，如下所示：

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

然后在HTML模板中调用这个方法，如下所示：

假设你声明的枚举如下所示：

export enum Action {
  update, create
}

通过这种方法，你可以比较和访问枚举变量，并在HTML模板中显示其字符串表示。

0
0 Comments

问题的原因是在Angular 8+的HTML模板中，无法直接比较和访问枚举变量。解决方法是将枚举变量赋值给组件类的一个属性，使其在模板中可用。

首先，在组件类中将枚举变量赋值给一个属性：

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

然后，在模板中使用该属性来引用枚举值：

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

如果想查看一个演示，请参考此处的stackblitz。

但是，有用户反馈这种方法不起作用，需要进一步调试。也有人尝试了另一个用户建议的方法NodeType[NodeType.HostService]。

有用户表示，使用冒号是一种习惯，大家可能忽略了等号。同时，有用户也无法在视图中使用导出的枚举进行条件检查。导出枚举并不足够，还需要将其赋值给组件类的一个属性，因为模板的表达式上下文是组件实例。

还有用户在之前尝试过这种方法，但并没有成功。请求修改Stackblitz，使枚举变量导出并且不在组件类内部定义。

另一个用户表示，在组件类中没有声明枚举，而是在同一个文件中但在组件类之外定义的。他修改了这个stackblitz来展示当枚举在一个单独的文件中声明时的工作原理。

最后，有用户表示非常感谢帮助并提供即时支持，并将这个答案标记为正确答案。还有用户指出，这种方法只适用于未定义为const的导出枚举。另一个用户表示，他将这个方法放在了一个BaseComponent类中，现在他的所有组件中都可以使用了。

0
0 Comments

如何在Angular 8+的HTML模板中比较和访问枚举变量？

问题的出现原因：

在Angular 8+的HTML模板中，想要比较和访问枚举变量是一项常见的需求。然而，由于HTML模板的特殊性，直接在模板中使用枚举变量并不会得到正确的结果。因此，需要找到一种方法来实现在HTML模板中比较和访问枚举变量的功能。

解决方法：

为了在HTML模板中使用枚举变量，我们需要进行以下几个步骤：

1. 定义枚举类型：

在组件的文件中，我们首先需要定义枚举类型。例如：

   export enum NodeType {
       Location,
       Host
   }

2. 在组件类中创建一个getter方法：

在组件的类中，我们创建一个getter方法来返回枚举类型。这样做的目的是为了在模板中能够通过Getter方法来访问枚举类型。例如：

   export class YourComponent {
       get Node() {
           return NodeType;
       }
   }

3. 在HTML模板中使用枚举变量：

在HTML模板中，我们可以通过{{ }}语法来访问组件类中的getter方法返回的枚举类型。例如：

   
{{Node.Location}}
 // 0
   Location

通过以上步骤，我们可以在Angular 8+的HTML模板中正确比较和访问枚举变量，并且获得预期的结果。

希望本文对于如何在Angular 8+的HTML模板中比较和访问枚举变量有所帮助。

0