无法访问HTML中的Typescript枚举

qvtsj1bj  于 2023-02-14  发布在  TypeScript
关注(0)|答案(7)|浏览(157)

我用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;
}

我还想使用枚举在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指示错误行:

有谁知道为什么枚举不能这样接近吗?

nwlqm0z1

nwlqm0z11#

模板的作用域仅限于组件示例成员。如果要引用某些内容,则需要在其中提供该模板

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

在HTML中,您现在可以使用

*ngIf="connectionResult.Success"

另请参阅Angular2从HTML模板访问全局变量

sycxhyv7

sycxhyv72#

您将不得不在.ts文件中以下面的方式写入它。

enum Tenure { day, week, all }

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

现在在html中你可以这样使用

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

希望现在更清楚了。:)

nbewdwxp

nbewdwxp3#

您可以将枚举作为属性添加到组件中,并在模板中使用与枚举相同的名称(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
r6l8ljro

r6l8ljro4#

import MyEnum from enums;

...声明变量...

public myEnum = MyEnum;

并且在HTML中用途:

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

zte4gxcn5#

为您服务

export enum ConnectionResult {
    Success,
    Failed     
}

将枚举赋给TypeScript文件中的变量

ConnectionResult = ConnectionResult;

然后从HTML中读取枚举,如下所示

*ngIf="result == ConnectionResult.Success"
atmip9wb

atmip9wb6#

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

export enum SomeEnum {
      Failure = "Failure",
      Success = "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">

bfnvny8b

bfnvny8b7#

最常见的错误是编码员在使用枚举时,如果他们想在html文件中使用它,他们声明如下,这是经常被忽视的。

myEnum : MyEnum

请注意,它不是冒号(:),而是一个赋值运算符必须使用如下:

myEnum = MyEnum

刚才我和同事坐在一起解决这个问题,因为只有一个字符(使用:而不是=)。

相关问题