我用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指示错误行:
有谁知道为什么枚举不能这样接近吗?
7条答案
按热度按时间nwlqm0z11#
模板的作用域仅限于组件示例成员。如果要引用某些内容,则需要在其中提供该模板
在HTML中,您现在可以使用
另请参阅Angular2从HTML模板访问全局变量
sycxhyv72#
您将不得不在
.ts
文件中以下面的方式写入它。现在在html中你可以这样使用
希望现在更清楚了。:)
nbewdwxp3#
您可以将枚举作为属性添加到组件中,并在模板中使用与枚举相同的名称(Quarters):
在模板中
之所以这样做是因为新的属性基本上是这种类型:
r6l8ljro4#
...声明变量...
并且在HTML中用途:
zte4gxcn5#
为您服务
将枚举赋给TypeScript文件中的变量
然后从HTML中读取枚举,如下所示
atmip9wb6#
如果枚举定义如下,则可以绑定为文本(这些值不会强制来自API的json字符串值)
在.ts文件中
public status: SomeEnum;
在.html中
<div *ngIf="status == 'Success'">
另一种方法,在Angular 8+中测试是使用带数字的枚举
在.ts文件中
public status: SomeEnum;
在.html中
<div *ngIf="status == 1">
bfnvny8b7#
最常见的错误是编码员在使用枚举时,如果他们想在html文件中使用它,他们声明如下,这是经常被忽视的。
请注意,它不是冒号(:),而是一个赋值运算符必须使用如下:
刚才我和同事坐在一起解决这个问题,因为只有一个字符(使用:而不是=)。