Question

当原始所选项目在新数组中时，我想在项目数组'重新加载'时将值保留在select中，否则我希望它选择默认选项（空值）。

我创建了一个plunker here

在该示例中，您可以看到即使刷新列表，所选汽车仍然是您选择的汽车。现在我需要添加一些代码来重新选择选择的汽车。

<select [ngModel]="selectedCar || ''" (ngModelChange)="setSelectedCar($event)">
  <option value="">--select a car--</option>
  <option *ngFor="let car of cars" [ngValue]="car">{{ car.brand }} - {{ car.model }}</option>
</select>

<br>
<br>

<label>Selected car:</label> <span *ngIf="selectedCar">{{ selectedCar.brand }} - {{ selectedCar.model }}</span> <span *ngIf="!selectedCar">none selected</span>

我使用单向绑定并使用ngModelChange的原因是能够使用默认（ - 选择car--）功能。

但是当我刷新列表时，我在select中编辑一个空的选择值（编辑：在chrome中）。

Answer 1

问题是您将下拉列表绑定到对象。更改对象列表时，所选值（对象）不再在列表中，因此无法再次选择。您需要做的是更改所选列表后，再次将selectedCar设置为与先前选定对象等效的相应新对象。

查看此编辑的plunker：https://plnkr.co/edit/HKpBLx?p=preview

请注意src/select-widget.ts file我是如何添加以下块的：

ngOnChanges() {
   if (this.selectedCar) {
       this.selectedCar = this.cars.find(i => i.brand === this.selectedCar.brand 
           && i.model === this.selectedCar.model);
   }
}

你可能宁愿使用类似身份证的东西来重新找到合适的车，但这应该可以帮助你顺利上路。

重新绑定数组后，Angular 2保持选定的值以进行选择

1 个答案: