Question

我使用Typescript创建了一个枚举，用于MyService.service.ts MyComponent.component.ts和MyComponent.component.html。

export enum ConnectionResult {
    Success,
    Failed     
}

我可以轻松地从MyService.service.ts获取并比较已定义的枚举变量：

this.result = this.myService.getConnectionResult();

switch(this.result)  
{
    case ConnectionResult.Failed:
         doSomething();
         break;
    case ConnectionResult.Success:
         doSomething();
         break;
}

我还想使用enum在我的HTML中使用* ngIf语句进行比较：

<div *ngIf="result == ConnectionResult.Success; else failed">
            <img src="../../assets/connection-success.png" height="300px" class="image-sign-style" />
</div>
<ng-template #failed>
       <img src="../../assets/connection-failed.png" height="300px" class="image-sign-style" />
</ng-template>

代码编译但浏览器给我一个错误：

无法读取未定义的属性

使用以下html指示错误行：

有谁知道为什么不能像这样接近枚举？

Answer 1

模板的范围仅限于组件实例成员。如果你想参考那里需要的东西

class MyComponent {
  get connectionResult() { return ConnectionResult; }
}

然后你可以使用

*ngIf="connectionResult.Success"

另见Angular2 access global variables from HTML template

Answer 2

您必须在.ts文件中以下列方式编写。

enum Tenure { day, week, all }

export class AppComponent {
    tenure = Tenure.day
    TenureType = Tenure
}

现在在html中你可以像

一样使用它

*ngIf = "tenure == TenureType.day ? selectedStyle : unSelectedStyle"

我希望现在更清楚了。：）

Answer 3

import MyEnum from enums;

.... 声明 var ....

public myEnum = MyEnum;

在 html 中使用：

<div *ngIf="xxx === myEnum.DATA"> ... </div>

Answer 4

您可以将枚举作为属性添加到组件中，并在模板中使用与枚举（季度）相同的名称：

enum Quarters{ Q1, Q2, Q3, Q4}

export class AppComponent {
   quarter = Quarters.Q1
   Quarters = Quarters
}

在您的模板中

<div *ngIf="quarter == Quarters.Q1">I=am only visible for Q1</div>

之所以起作用，是因为新的por本质上就是这种类型的：

TileType: typeof TileType

Answer 5

如果枚举定义如下，则可以绑定为文本（这些值将不会强制来自API的json字符串值）

  export enum SomeEnum {
      Failure,
      Success,
  }

在.ts文件中

public status: SomeEnum;

在.html

中

<div *ngIf="status == 'Success'">

在Angular 8+中测试的另一种方法是使枚举具有数字

  export enum SomeEnum {
      Failure = 0,
      Success = 1,
  }

在.ts文件中

public status: SomeEnum;

在.html

中

<div *ngIf="status == 1">

无法在HTML中处理Typescript枚举

5 个答案: