html - 无法在 HTML 中处理 Typescript 枚举

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

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

代码编译通过但浏览器报错:

Cannot read property of undefined

带有以下 html 指示错误行:

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

Answer 1

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

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

在您现在可以使用的 HTML 中

*ngIf="connectionResult.Success"

另见 Angular2 access global variables from HTML template