在angular4中分配select初始值

Question

在我的 angular 值中，我有一个 select 用于更改时区。 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 选项如下所示：

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

我无法设置 select 的初始值。

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

如果我给出 userTimeZone.Id 和 [ngValue]="time.id" 选项得到 selected 但更改时返回的值只是 id 而不是整个对象。

当 select 选项更改时我想要整个对象并设置 select 的初始值。

不知道哪里不对here.Please指导

谢谢

Answer 1

试试这个：

使用 (ngModelChange)="setTimezoneId($event)" 而不是 (change)="setTimezoneId($event)"

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

Answer 2

您需要在您的选项中使用 [attr.value] 并确保您的选项的值不是对象，您可以使用和字符串，然后在需要时与集合中的对象匹配。

在这个例子中检查app.ts：

https://plnkr.co/edit/gvc5bf50sgA57Y0YGRui

Answer 3

下面是我所做的

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

在angular4中分配select初始值

assign select initial value in angular4

select

onchange

angular