使用ngModel设置初始值用于选择下拉菜单

我有一个加载到下拉列表中的tranTypes（事务类型）数组。用户选择一个值并在返回时导航到另一个组件后，在下拉列表中未选择该值。使用ngModel设置初始值用于选择下拉菜单

从其他阅读中，我了解到这是B/C对象不是同一个实例。那么在这种情况下我该怎么做？

<select name="tranType" 
    class="form-control" 
    [(ngModel)]="model.tranType" 
    required> 
    <option *ngFor="let tranType of tranTypes" 
    [ngValue]="tranType">{{tranType.desc}}</option> 
</select>

解决方案

ngOnInit(): void { 
    this.myService.getTranTypes() 
     .subscribe(tranTypes => { 
      this.tranTypes = tranTypes; 
      //set value of tranType if already set in the model 
      if (this.myService.model.tranType != undefined) { 
       this.myService.model.tranType = this.tranTypes.find(r => r.id == this.myService.model.tranType.id); 
      } 
     }, 
     error => this.errorMessage = <any>error); 
}

来源

2017-03-24 spottedmahn

从4.0.0-beta.6上，你可以使用自定义的比较函数

<select [compareWith]="equals"

equals(o1: Country, o2: Country) { 
    return o1.id === o2.id; 
}

对于早期版本，您可以通过比较类似于上述等于的内容，在tranTypes中查找tranType，然后将找到的实例分配到model.tranType以使其成为选定的一个。

来源

2017-03-24 20:18:35

您必须将变量model.tranType置于由载入您正在导航的两个模型的模型加载的服务中。这样你最终将得到一个单身服务，当你使用你的网站时，这个变量将被保存下来。这种方法的问题是，如果刷新页面，服务将重新启动，并且您将再次使用默认选项。为了解决这个问题，你必须在localStorage中保存model.tranType变量的状态，所以即使在关闭浏览器的时候，选项仍然是一样的。

来源

2017-03-24 20:19:12 vinagreti

您应该将绑定到ngModel的值与数组中的对象完全相同。

<select [(ngModel)]="model.tranType"> 
<option *ngFor="let type of tranTypes" [ngValue]="type.id">{{type.Desc}}</option> 
</select>

建议使用id属性作为ngValue。

LIVE DEMO

来源

2017-03-24 20:35:19 Aravind

使用ngModel设置初始值用于选择下拉菜单

回答

相关问题