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 (:

무엇 없음 확인

는

감사

Answer 1

내가 userTimeZone.Id가 time.Id와 일치하고 기본 옵션을 선택 얻을 것이다

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

을 한 것입니다. 우리는이 값에 기초하여 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