Question

在首次在Angular 5应用程序中加载页面时，即使使用相同的属性ID设置值和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>

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

Answer 1

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

我不太清楚您的真实代码是什么，我会说最好的方法是使用stateSelected变量和您稍后可以使用的id。

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

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

Answer 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;         
  }

我希望它能帮助遇到此问题的人。

Angular5：第一次选择[选择]无效

2 个答案: