HTML内のTypescript列挙型にアプローチできません

MyService.service.tsMyComponent.component.tsおよびMyComponent.component.htmlで使用するTypescriptを使用して列挙型を作成しました。

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

また、* ngIfステートメントを使用して、HTML内の比較に列挙型を使用したいと思いました。

<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表示エラー行があります。

列挙型にこのようにアプローチできない理由を誰かが知っていますか？

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

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

HTMLで使用できるようになりました

*ngIf="connectionResult.Success"

HTMLテンプレートからのAngular2アクセスグローバル変数も参照してください。

次のように.tsファイルに書き込む必要があります。

enum Tenure { day, week, all }

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

そして今htmlであなたはこれを次のように使うことができます

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

今はもっとはっきりしているといいのですが。:)

列挙型をプロパティとしてコンポーネントに追加し、テンプレートで列挙型と同じ名前（Quarters）を使用できます。

enum Quarters{ Q1, Q2, Q3, Q4}

export class AppComponent {
   quarter = Quarters.Q1
   Quarters = Quarters
}

テンプレート内

<div *ngIf="quarter == Quarters.Q1">I=am only visible for Q1</div> 

これが機能する理由は、新しいポーパティが基本的にこのタイプであるためです。

TileType: typeof TileType

列挙型が以下のように定義されている場合は、テキストとしてバインドできます（これらの値は、APIからのjson文字列値を強制しません）

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