web-dev-qa-db-ja.com

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

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

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

また、* 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>

コードはコンパイルされますが、ブラウザにエラーが表示されます。

未定義のプロパティを読み取れません

enter image description here

次のhtml表示エラー行があります。

enter image description here

列挙型にこのように近づくことができない理由を誰もが知っていますか？

htmlangulartypescriptenums
40
Klyner

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

class MyComponent {
  get connectionResult() { return ConnectionResult; }
}

その後、使用できます

*ngIf="connectionResult.Success"

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

72
Günter Zöchbauer

.tsファイルに次のように記述する必要があります。

enum Tenure { day, week, all }

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

そして今、htmlではこれを次のように使用できます

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

私はそれが今より明確であることを望みます。 :)

18
Nikhil Manapure

テンプレートに列挙型をプロパティとしてコンポーネントに追加できますおよび同じ名前を使用列挙型（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>

これが機能する理由は、新しいporpertyが基本的にこのタイプだからです。

TileType: typeof TileType
4
Ondrej Peterka