[解決済み] HTML内でTypescriptのenumにアプローチできない

質問

MyService.service.ts MyComponent.component.ts と MyComponent.component.html で使用するために、Typescript で enum を作成したのですが、このenum はどのように使用するのですか？

export enum ConnectionResult {
    Success,
    Failed     
}

MyService.service.tsから定義されたenum変数を簡単に取得し比較することができますね。

this.result = this.myService.getConnectionResult();

switch(this.result)  
{
    case ConnectionResult.Failed:
         doSomething();
         break;
    case ConnectionResult.Success:
         doSomething();
         break;
}

また、HTMLの中で*ngIf文を使って比較するためにenumを使いたかったのです。

<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表示エラー行で。

なぜenumがこのようにアプローチできないのか、どなたかご存知でしょうか？

どのように解決するのですか？

テンプレートのスコープは、コンポーネントのインスタンスメンバに限定されます。 何かを参照したい場合は、そこで利用可能である必要があります。

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

HTMLの中で

*ngIf="connectionResult.Success"

参照 Angular2がHTMLテンプレートからグローバル変数にアクセスする