Angular5：第一次选择[selected]不起作用答案

【问题标题】：Angular5: select [selected] not work for the first timeAngular5：第一次选择[selected]不起作用
【发布时间】：2019-04-10 14:27:16
【问题描述】：

第一次在 Angular 5 应用程序中加载页面时不会选择该值，即使使用相同的属性 id 对 value 和 ngModel 值都进行严格处理。

<div class="form-group" *ngIf="states.length > 1">  
    <select [(ngModel)]="trip?.state.id" #state="ngModel" name="stateId" id="stateId" [ngModelOptions]="{ updateOn: 'blur' }">                                       
        <option [ngValue]="null">{{defaultSelect}}</option>
        <option *ngFor="let s of states" [ngValue]="s.state.id">{{s.state.name}}</option>
    </select>   
</div>

预期结果是选择组件内显示的选定状态值。实际结果是空值的select组件。

【问题讨论】：

你应该在stackblitz.com复制你的问题
您确定选中的state.id 存在于<option>s 中吗？
去掉ngModel中的“安全”操作符，可以使用<select *ngIf="trip"..>`或者在[ngModel]="trip? trip.state.id:null (ngModelChange)="trip.state.id=$event"中拆分[(ngModel)]
你能把状态对象和行程对象是什么样子的吗？

标签： angular

【解决方案1】：

问题来自[(ngModel)]="trip?.state.id"，它直接更改您的 state.id，而不是从您的状态中选择另一个对象。

在不太清楚你的真实代码是什么样子的情况下，我会说最好的方法是使用带有 id 的 stateSelected 变量，以便以后使用。

您可以在此处查看实时示例：

https://stackblitz.com/edit/angular-stack-selectngmodel-55583749?file=src/app/selector/selector.component.html

【讨论】：

【解决方案2】：

我通过改变两件事解决了这个问题：将 id 更改为真实对象：

<option *ngFor="let s of states" [ngValue]="s.state.id">{{s.state.name}}</option>

到

<option *ngFor="let s of states" [ngValue]="s.state">{{s.state.name}}</option>

我也使用了比较机制，这里是select标签的一部分：

[compareWith]="compareStatesByOptionId"

来自组件的方法是：

compareStatesByOptionId(idFirst, idSecond) {        
    return idFirst && idSecond && idFirst.id == idSecond.id;         
  }

希望对遇到这个问题的人有所帮助。

【讨论】：