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

Question

首先，大家好。这是问题所在：我有 2 个 select 标签。第一个 select 标签有 2 个选项标签：第一个选项标签有一个用作默认值的值（占位符类型 +> "select" 或 "choose" 等），第二个选项标签是带有一些街道名称的 ngFor 循环。

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

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

一开始加载 window 时，默认值选项 ("select") 默认显示良好，但一旦我选择城市选项，默认值 "select" 街道 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'];
  }
}

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

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

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

Select //已禁用
CH DU LAC-A-L'ORIGINAL // 第一个索引默认显示
莫德街
等...

如何在每次切换城市选项时强制街道 select 将 "select" 作为默认值占位符？？？

谢谢大家

Answer 1

实际上有一个解决方案:) 只需要在反应式表单的情况下重置表单控件：

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

然后再取默认值

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

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

Angular 7 select tag default option value issue

angular

angular7