angular4で選択初期値を割り当てます

Question

私の角度の値には、タイムゾーンを変更するための選択肢があります。 this.userTimeZoneは、コンポーネント内のオブジェクトです。

{ 
AdjustmentRules:null 
BaseUtcOffset:"-04:30:00" 
DaylightName:"Venezuela Daylight Time" 
DisplayName:"(UTC-04:30) Caracas" 
Id:"Venezuela Standard Time" 
StandardName:"Venezuela Standard Time" 
SupportsDaylightSavingTime:false} 

私の選択オプションは、次のようになります。

<select name="timeZones" [(ngModel)]="userTimeZone" (change)="setTimezoneId($event)" class="form-control"> 
    <option *ngFor="let time of timezones" [ngValue]="time">{{time.DisplayName}}</option> 
</select> 

私は選択の初期値を設定することができませんでしだ。

userTimeZoneに値が設定されていても、選択時に選択時に空白が表示されます。

私がuserTimeZone.Idと[ngValue] = "time.id"を与えると、オプションが選択されますが、変更時に返される値はオブジェクト全体ではなくidだけです。

選択オプションが変更されたときにオブジェクト全体が必要な場合は、選択の初期値も設定します。

使用（ngModelChange）= "setTimezoneId（$イベント）" の代わりに、（変更）= "setTimezoneId（：

ありません何が間違っていることを確認here.Pleaseガイド

おかげ

Answer 1

ので、以下は私が

<select name="timeZones" [(ngModel)]="userTimeZone.Id" (change)="setTimezoneId($event)" class="form-control"> 
     <option *ngFor="let time of timezones" [value]="time.Id"> {{time.DisplayName}} </option> 
</select> 

やったuserTimeZone.Idはtime.Idと一致しますされ、デフォルトのオプションが選択されてしまいます。我々は、値に基づいて、JSONからオブジェクトをフィルタリング変更方法で

setTimezoneId(event:any) { 
      /*Filter object from the json */ 
      this.userTimeZone = this.timezones.filter(function (zone: any) { 
       return zone.Id == event.target.value; 
      })[0]; 
      console.log(this.userTimeZone); 
     } 

Answer 2

はこれを試してみてください$イベント）」

<select name="timeZones" [(ngModel)]="userTimeZone" (ngModelChange)="setTimezoneId($event)" class="form-control"> 
    <option *ngFor="let time of timezones" [ngValue]="time">{{time.DisplayName}}</option> 
</select> 

Answer 3

あなたはオプションで [attr.value]を使用し、オプションの値がオブジェクトではないことを、あなたが使用できることを確認する必要があり

と文字列と必要に応じてコレクション内のオブジェクトと一致させます。

チェックこの例ではapp.ts：

https://plnkr.co/edit/gvc5bf50sgA57Y0YGRui