如果 ngModel 存在，则设置选定的选项答案

【问题标题】：Set selected option if ngModel exists如果 ngModel 存在，则设置选定的选项
【发布时间】：2017-03-29 14:31:31
【问题描述】：

我有一个选择字段如下：

<select class="form-control" [(ngModel)]="myClient.address && myClient.address.state" name="state" (ngModelChange)="getCitiesByState($event)">
   <option class="form-control" *ngFor="let state of states" 
      [ngValue]="state">
       {{state.name}}</option>
</select>

但是，由于我正在重用相同的组件，如果我的 ngModel 有一个值，我希望我的选项设置为一个值。例如，如果myClient.address 具有myClient.address = {"name":"Texas", "stateId":"2"}，我希望德克萨斯州成为选定选项。

我如何做到这一点？

【问题讨论】：

two way binding with elvis-operator的可能重复
@echonax 没有帮助。
看来你还需要stackoverflow.com/questions/35945001/…中提到的compareFn。对于<select> 上的ngModel，默认情况下只比较对象标识。它不检查对象的属性是否相同。如果你想这样，你需要实现compareFn
细链接可以帮助你stackoverflow.com/questions/35978450/…
查看answer

标签： angular typescript angular2-forms

【解决方案1】：

<select class="form-control" [ngModel]="myClient.address?.name" name="state" (ngModelChange)="getCitiesByState($event)">
   <option class="form-control" *ngFor="let state of states" 
      [ngValue]="state">
       {{state.name}}</option>
</select>

现在如果myClient.address 有myClient.address = {"name":"Texas", "stateId":"2"}，我希望德克萨斯州成为选定选项。

您需要的所有更改是 [ngModel]="myClient.address?.name" 添加 ? ，它定义了可选行为，因此如果提供了它，那么它将被选中，如果没有，它将工作，因为没有任何选择。

但在这里你必须提供至少myClient.address 有值或没有值。

【讨论】：