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有一个值，但select在加载时显示为空白。

如果我给userTimeZone.Id和[ngValue] =＆＃34; time.id＆＃34;选项被选中但是更改时返回的值只是id而不是整个对象。

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

不确定这里有什么问题。请指导

由于

Answer 1

试试这个：

使用（ngModelChange）=＆＃34; setTimezoneId（$ event）＆＃34;而不是（改变）=＆＃34; setTimezoneId（$ event）＆＃34;

<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中分配选择初始值

3 个答案: