带有 2 个选择选项和默认值的角度问题答案

【问题标题】：Angular issue with 2 select options and default value带有 2 个选择选项和默认值的角度问题
【发布时间】：2018-11-23 15:37:40
【问题描述】：

我在角度 7 中的选择输入有问题。我有 2 个选择。当我选择第二个选择的选项时，其对应值的列表显示在上部选择输入中。并且必须显示一个默认值，就好像它是一个占位符（“选择”）。但问题是当我在第二次选择中从一个值切换到另一个时，第一次选择中的占位符（“选择”）成为列表的第一个索引值：

<select class="dropdown-select" formControlName="street-dd">
  <option class="dropdown-select" disabled selected [ngValue]="null">Select</option>
    <option class="dropdown-select"  *ngFor="let street of retrievedStreets">{{street}}</option>
</select>

<select class="dropdown-select"(change)="onCitySelected($event)" formControlName="city">
  <option class="dropdown-select" *ngFor="let city of retrievedCities" [value]="city['city']">{{city["city"]}}</option>
</select>

这里是 TS 文件：

export class AddressComponent  {
  public retrievedCities: Array<any> = [];
  public retrievedStreets: Array<any> = [];

 private retrieveCities(cities: any) {
    this.retrievedCities = [];
    if (cities && cities.length > 0) {
      this.retrievedCities = cities;
    } 
  }

  public onCitySelected(city) {
    this.retrievedStreets = null;
      this.retrievedStreets = this.lookupStreets(city);
      console.log('retrieved street', this.retrievedStreets);
    this.retrievedStreets = this.retrievedStreets.sort();
  }

  private lookupStreets(city): Array<any> {
    return find(this.retrievedCities, {'city': city.target.value})['streets'];
  }
}

一开始没有问题默认值显示为占位符：

但是当我在下拉列表中选择街道选择的值，然后单击城市选择的另一个值时，街道列表的第一个索引显示为占位符，并且“选择”在下拉列表中显示为禁用：

当我点击街道的下拉列表时，我得到：

选择//禁用
CH DU LAC-A-L'ORIGINAL
莫德街
等...

每次切换城市选项时，如何强制街道选择将“选择”作为默认值占位符？？？

【问题讨论】：

如果可能的话，能否请您出示 ts 文件？谢谢
我已经更新了最初的帖子。谢谢@user9964622

标签： javascript angular frontend

【解决方案1】：

其实是有解决办法的：）只需要在响应式表单的情况下重置表单控件：

this.yourFormGroup.get('nameOfYourFormControl').reset()

然后会重新拾取默认值。

希望有一天能对某人有所帮助

【讨论】：