使用 ngModel 为选择下拉菜单设置初始值答案

【问题标题】：setting initial value using ngModel for select dropdown使用 ngModel 为选择下拉菜单设置初始值
【发布时间】：2017-03-24 20:14:00
【问题描述】：

我有一组tranTypes（事务类型），它们被加载到下拉列表中。用户选择一个值并在返回后导航到另一个组件后，下拉列表中未选择该值。

从其他阅读材料中，我了解到这是 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);
}

【问题讨论】：

标签： angular angular-ngmodel

【解决方案1】：

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

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

最好使用 id 属性作为 ngValue。

LIVE DEMO

【讨论】：

【解决方案2】：

从4.0.0-beta.6开始，可以使用自定义比较功能

<select [compareWith]="equals"

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

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

【讨论】：

【解决方案3】：

您必须将变量 model.tranType 放置在由模型加载的服务中，该模型加载您正在导航的两个模型。这样，您最终将获得一个单例服务，并且在您使用站点时变量将被保留。这种方法的问题是，如果您刷新页面，服务将重新启动，并且您将再次选择默认选项。要解决这个问题，您必须将model.tranType 变量状态保存在localStorage 中，这样即使关闭浏览器，选项也会保持不变。

【讨论】：