无法在 HTML 中处理 Typescript 枚举
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44045311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Cannot approach Typescript enum within HTML
提问by Klyner
I made an enum with Typescript to use in MyService.service.ts MyComponent.component.ts and MyComponent.component.html.
我用 Typescript 做了一个枚举，用于 MyService.service.ts MyComponent.component.ts 和 MyComponent.component.html。
export enum ConnectionResult {
Success,
Failed
}
I can easily get and compare a defined enum variable from MyService.service.ts:
我可以轻松地从 MyService.service.ts 获取并比较定义的枚举变量：
this.result = this.myService.getConnectionResult();
switch(this.result)
{
case ConnectionResult.Failed:
doSomething();
break;
case ConnectionResult.Success:
doSomething();
break;
}
I also wanted to use the enum for a comparison within my HTML using the *ngIf statement:
我还想使用枚举在我的 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>
The code compiles but the browser gives me an error:
代码编译但浏览器给了我一个错误：
Cannot read property of undefined
无法读取未定义的属性
With the following html indication error line:
带有以下 html 指示错误行：
Does anyone know why the enum cannot be approached like this?
有谁知道为什么不能像这样接近枚举？
回答by Günter Z?chbauer
The scope of the template is limited to the component instance members. If you want to refer to something it needs to be available there
模板的范围仅限于组件实例成员。如果你想引用它需要在那里可用的东西
class MyComponent {
get connectionResult() { return ConnectionResult; }
}
then you can use
然后你可以使用
*ngIf="connectionResult.Success"
See also Angular2 access global variables from HTML template
回答by Nikhil Manapure
You will have to write it in the following way in .tsfile.
您必须以以下方式将其写入.ts文件。
enum Tenure { day, week, all }
export class AppComponent {
tenure = Tenure.day
TenureType = Tenure
}
And now in html you can use this like
现在在 html 中你可以像这样使用
*ngIf = "tenure == TenureType.day ? selectedStyle : unSelectedStyle"
I hope it is more clear now. :)
我希望现在更清楚了。:)
回答by Ondrej Peterka
You can just add the enum to your component as property and use the same nameof the enum (Quarters) in your templates:
您可以将枚举作为属性添加到组件中，并在模板中使用与枚举（Quarters）相同的名称：
enum Quarters{ Q1, Q2, Q3, Q4}
export class AppComponent {
quarter = Quarters.Q1
Quarters = Quarters
}
In your template
在您的模板中
<div *ngIf="quarter == Quarters.Q1">I=am only visible for Q1</div>
The reason why this works is that the new porperty is basically of this type:
这样做的原因是新的属性基本上是这种类型：
TileType: typeof TileType
回答by Pawel Cioch
You can bind as text, somehow proposed solutions does not seem to work for me so I did this
您可以绑定为文本，不知何故提出的解决方案似乎对我不起作用，所以我这样做了
<div *ngIf="result == 'Success'; else failed">
<div *ngIf="result == 'Success'; else failed">
Not an ideal solution, but using object orientated way would not help with auto rename anyway. On the template side the enum property is evaluated to corresponding text.
不是理想的解决方案，但无论如何使用面向对象的方式都无助于自动重命名。在模板方面，枚举属性被评估为相应的文本。
