使用ngModel为选择下拉列表设置初始值

时间:2017-03-24 20:14:01

标签: angular angular-ngmodel

我有一个加载到下拉列表中的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);
}

3 个答案:

答案 0 :(得分:3)

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

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

最好建议将id属性用作ngValue。

<强> LIVE DEMO

答案 1 :(得分:1)

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

<select [compareWith]="equals"
equals(o1: Country, o2: Country) {
   return o1.id === o2.id;
}

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

答案 2 :(得分:1)

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