Angular 7选择标签默认选项值问题

Question

首先，大家好。这是问题：我有2个select标签。第一个选择标签具有2个选项标签：第一个选择标签具有用作默认值的值（占位符的种类+>“选择”或“选择”等），第二个选择标签是具有某些街道名称的ngFor循环。 / p>

第二个选择标签只有一个选项标签，带有一个显示某些城市名​​称的ngFor循环。

每当我单击城市名称时，街道选择标签都会在下拉列表中显示其街道名称。

在加载窗口的一开始，默认情况下默认值选项（“选择”）会很好地显示，但是一旦我选择了一个城市选项，便会在其中显示街道选择标签的默认值“ select”下拉列表，但相应街道列表的第一个索引，默认显示。

我找不到原因很令人沮丧。

 <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'];
  }
}

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

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

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

• 选择//已禁用
• CH DU LAC-A-L'ORIGINAL //默认显示第一个索引
• RUE MAUDE
• 等...

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

谢谢大家

Answer 1

实际上有一个解决方案：)如果需要响应式表单，只需重置formcontrol：

this.yourFormGroup.get（'nameOfYourFormControl'）。reset（）

然后将再次使用默认值。

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