Angular2の条件付きngModel

Question

要件があります。存在する場合のみ、ngModelに電話番号をバインドする必要があります。次のように私のコードは次のとおりです。

<cd-input 
    size="15" 
    [(ngModel)]="phone_numbers[0].full_number" 
    [reformat]="something" 
    [format]="something" 
    placeholder="(111) 222-3333"> 
</cd-input> 

電話番号が存在しているが、それがない場合、私は次のエラーを取得する場合、これはうまく機能：

Cannot read property 'full_number' of undefined

だから、これに基づいてSO私が試した、LINKを投稿します次のようになります。

<cd-input 
    size="15" 
    [(ngModel)]="phone_numbers[0].length > 0 ? phone_numbers[0].full_number : null" 
    [reformat]="something" 
    [format]="something" 
    placeholder="(111) 222-3333"> 
</cd-input> 

ただし、構文エラーが発生します。

Uncaught Error: Template parse errors

これを修正する1つの方法は、*ngIfを使用してコードセットをもう一度繰り返すことです。しかし、三項状態チェックのように、インラインで行うにはどうすればよいですか？あなたのような結合性およびイベント分割する必要があり、このような結合式の場合

Answer 1

を私はそれが好きだろう：

[ngModel]="phone_numbers && phone_numbers[0]?.full_number" 
(ngModelChange)="phone_numbers?.length && phone_numbers[0].full_number=$event" 

なぜ？

[(ngModel)]は、[ngModel]（入力）と(ngModelChange)（出力）に拡張されています。

私たちは私たちのコンポーネントクラスにphone_numbers性質を持っており、それは少なくとも一つのアイテムを持っていることを確認するために、入力に

phone_numbers && phone_numbers[0]?.full_number

を可決しました。そして(ngModelChange)="phone_numbers && phone_numbers[0]?.full_number=$event"はしません（私はまた、我々は、入力中に何かを入力するとngModelChangeハンドラが呼び出された

安全なナビゲーション演算子ここで使用して、私は割り当てで安全運航のパイプを使用することはできませんしない限り、undefined値をチェックするために、ここで同じことを行います仕事）

Answer 2

：

[ngModel]="phone_numbers[0]?.full_number" 
(ngModelChange)="phone_numbers?.length && phone_numbers[0] ? phone_numbers[0].full_number=$event : null"