角度2でカスタム列挙型プロパティを使用する方法

Question

角度2を初めて使っていますが、これを使ってアプリケーションを作成しています。私はCSharpのバックグラウンドから来ているので、enum型のプロパティを作成できると仮定します。その場所に基づいて特定のenum値を適用するようにします。

しかし、私はどのようにそのような技術を達成するために説明するオンラインの例を発見していない。デモを提供することは可能ですか？

export enum DisplayType { 
    Small, 
    Large 
} 

<e-view displayType="DisplayType.Small"></e-view> 

可能であれば、同じ結果を達成できる他の手法がありますか？

Answer 1

あなたが代わりにあなたが列挙型の値に

<e-view [displayType]="getType()"></e-view> 
getType(){ 
    return DisplayType.Small 
} 

注意を取得する方法を使用する必要があり、HTMLで次のように変数名を処理することができません

：あなたの質問displayTypeで[ ]

Answer 2

export enum AgentStatus { 
    available =1 , 
    busy = 2, 
    away = 3, 
    offline = 0 
} 

を持っていませんでした

文字列をTypeScriptの列挙型に変換するにはどうすればよいですか？

var value = AgentStatus["offline"]; // so value is now 0 

// You can also use this, which only gives IDE hints, no runtime benefit 
var value: AgentStatus = AgentStatus["offline"]; 

TypeScript列挙型の値をすべて取得するにはどうすればよいですか？

var options : string[] = Object.keys(AgentStatus); 
// The options list has the numeric keys, followed by the string keys 
// So, the first half is numeric, the 2nd half is strings 
options = options.slice(options.length/2); 

あなたAngular2テンプレートでこれを記述する場合：

{{AgentStatus[myValue]}} 

それは輸入のタイプ（それはAngularJSで、後に実行されます）へのアクセス権を持っていないので、それは失敗します。

それを動作させるために、あなたのコンポーネントが列挙型/オブジェクトへの参照を持っている必要があります、のようなもの：

export class MyComponent { 
    // allows you to use AgentStatus in template 
    AgentStatus = AgentStatus;   

    myValue : AgentStatus; 
    // ... 
} 

例：

import { Component } from '@angular/core'; 

enum AgentStatus { 
    available =1 , 
    busy = 2, 
    away = 3, 
    offline = 0 
} 

例

@Component({ 
    selector: 'my-app', 
    template: ` 
    <h1>Choose Value</h1> 

    <select (change)="parseValue($event.target.value)"> 
    <option>--select--</option> 
    <option *ngFor="let name of options" 
     [value]="name">{{name}}</option> 
    </select> 

    <h1 [hidden]="myValue == null"> 
    You entered {{AgentStatus[myValue]}} 
    <br> 
    You are {{isOffline ? "offline" : "not offline"}}. 
    </h1>` 
}) 
export class AppComponent { 


    options : string[]; 
    myValue: AgentStatus; 
    AgentStatus : typeof AgentStatus = AgentStatus; 
    isOffline : bool; 

    ngOnInit() { 
    var x = AgentStatus; 
    var options = Object.keys(AgentStatus); 
    this.options = options.slice(options.length/2); 
    } 

    parseValue(value : string) { 
    this.myValue = AgentStatus[value]; 
    this.isOffline = this.myValue == AgentStatus.offline; 
    } 
} 

Answer 3

あなたのコンポーネントに

を追加し、もう1つのゲッターを追加してください

get DisplayType() { 
    return DisplayType; 
} 

、あなたはプロパティを追加、列挙型を使用してコンポーネントでは、あなたのテンプレートに

[displayType]="DisplayType.Small" 

Answer 4

を使用することができます。

readonly DisplayType: typeof DisplayType = DisplayType; 

は、次にHTMLで列挙型を呼び出す：

<e-view [displayType]="DisplayType.Small"></e-view>