在angular4中指定选择初始值

在我的角度值中，我有一个用于更改时区的选择。 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>

{{time.DisplayName}

我无法设置select的初始值

虽然userTimeZone有一个值，但select在加载时显示为空

如果我给userTimeZone.Id和[ngValue]=“time.Id”，则会选择该选项，但更改时返回的值仅为Id，而不是整个对象

我希望在“选择”选项更改时显示整个对象，并设置“选择”选项的初始值

不确定这里出了什么问题。请引导

谢谢

试试这个：

使用（ngModelChange）=“setTimezoneId（$event）”代替（change）=“setTimezoneId（$event）”

{{time.DisplayName}

您需要在选项中使用

[attr.value]

，并确保选项的值不是对象，您可以使用和字符串，然后根据需要与集合中的对象匹配

在本例中，选中app.ts：

下面是我所做的

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

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

    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);
        }