Angular2：入力/選択文字列の値を厳密な型付き値にパースします

Question

正解を得るために1日以上検索していますが、まだ私はちょっとありません。質問は本当にシンプルです：私はブール値であるプロパティを持つモデルを持っています。そのプロパティをselectにマップすると、ユーザーは適切な値（true、falseまたはnull）を選択できます。 Angularは実際に文字列を返しています。具体的な取得するには：

<select [(ngModel)]="searchRequest.online" class="form-control" (onchange)="search()" numberBinder> 
    <option value="">Select</option> 
    <option value="true">Online</option> 
    <option value="false">Offline</option> 
</select> 

そして、検索要求モデルクラス：

export class ClientSearchRequest { 
name: string; 
online: boolean; 
status: string; 
page: number; 
pageSize: number; 

constructor() { 
    this.name = ""; 
    this.online = null; 
    this.status = ""; 
    this.page = 1; 
    this.pageSize = 50; 
} 

}

私は、次のtempalteを持って

@Component({ 
    selector: 'clientlist', 
    templateUrl: './app/components/clientlist/clientlist.html' 
}) 

export class ClientListComponent { 
    searchRequest : ClientSearchRequest; 
} 

：

を私は次のコンポーネントを持っています

モデルを塗りつぶすと、オンラインフィールドに文字列（ "true"）が設定されます。これを修正するには？余分なコンポーネントを作成することなく正しいアプローチは何ですか？

Answer 1

私はngValueディレクティブを使用しようとします。あなたの代わりに値の文字列のオブジェクトを使用することができますこの方法：

<select [(ngModel)]="searchRequest.online" class="form-control" 
     (onchange)="search()" numberBinder> 
    <option [ngValue]="'null'">Select</option> 
    <option [ngValue]="true">Online</option> 
    <option [ngValue]="false">Offline</option> 
</select> 

null値を使用すると、あなたは、このための回避策を必要と動作しません。詳細については、この質問を参照してください：

• Angular2 select with ngValue null