无法接近 HTML 中的 Typecript 枚举

我使用 Type 脚本创建了一个枚举，可以在 MyService.service.ts MyComponent ent.Component. ts 和 MyComponent ent.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;
}

我还想使用枚举在 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>

代码在编译，但是浏览器给了我一个错误:

无法读取未定义的属性

enter image description here

带有以下 html 指示错误行:

enter image description here

有人知道为什么不能这样处理枚举吗？

115413 次浏览
小开

模板的范围仅限于组件实例成员。 如果你想引用某些东西，它需要在那里可用

class MyComponent {
public get connectionResult(): typeof ConnectionResult {
return ConnectionResult;
}
}

在 HTML 中，您现在可以使用

*ngIf="connectionResult.Success"

参见 Angular2从 HTML 模板访问全局变量

小开
最佳答案

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

enum Tenure { day, week, all }


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

现在在 html 中，您可以像这样使用它

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

我希望现在更清楚了。 :)

小开

您只需将枚举作为模板中枚举(Quarters)的属性 用同一个名字添加到组件中:

enum Quarters{ Q1, Q2, Q3, Q4}


export class AppComponent {
quarter = Quarters.Q1
Quarters = Quarters //here you are creating a variable/alias to the enum
}

在你的模板里

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

这样做的原因是，新的属性基本上是这种类型的:

TileType: typeof TileType
小开

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

  export enum SomeEnum {
Failure = "Failure",
Success = "Success",
}

在.ts 文件中

public status: SomeEnum;

在. html 中

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

另一种方法，在角8 + 测试是有数字枚举

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

在.ts 文件中

public status: SomeEnum;

在. html 中

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

小开 
import MyEnum from enums;

声明 var。

public myEnum = MyEnum;

在 html 中使用:

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

为您效劳

export enum ConnectionResult {
Success,
Failed
}

将枚举分配给 TypeScript 文件中的变量

ConnectionResult = ConnectionResult;

然后从 HTML 中读取 Enum，如下所示

*ngIf="result == ConnectionResult.Success"

提交答案