Question

所以我有一个带有两个下拉列表（或选择标签）的表单，一个用于国家，另一个用于州。我们的想法是，当您选择一个国家/地区时，选择会导致进行呼叫，从而获得该特定国家/地区的州/省列表。因此，它在大多数情况下都有效，但是当状态列表更新发生而不是清除列表并添加新项目时，它只是将新项目添加到现有列表中。即使我将组件成员设置回空数组。我不确定我做错了什么，并希望得到我的开发人员的一些见解。

这是HTML

 <!-- ROW -->
 <div class="row">
   <div class="form-group profile-group">
        <label for="country">Country:</label>
        <select class="form-control" [(ngModel)]="Country" 
            (change)="countryChanged($event.target.value)">
          <option *ngFor="let c of countries" [ngValue]="c.country_code">
             {{c.country_name}}</option>
        </select>
      </div>
</div>

<div class="form-group profile-group">
        <label for="state">State:</label>
        <select class="form-control" [(ngModel)]="State">
          <option *ngFor="let s of states" [ngValue]="s.state_code">
              {{s.state_name}}</option>
        </select>
      </div>

这是组件类型脚本

 countries: Country[];
    states: State[];

    countryChanged(selected: string) {
    if (selected === undefined) {
      selected = this._customer.country;
    }

    if (selected.length > 2 ) {
      selected = selected.substr(selected.length - 2, 2);
    }

    this.states = [];
    this.getStates(selected).subscribe(data => {
      this.states = data as State[];
    })
  }

  getCounties() {
    return this.http.get(this.config.envSpecific.apiUrl + '/api/country');
  }

  getStates(countryCode: string) {
    return this.http.get(this.config.envSpecific.apiUrl + '/api/states/' + countryCode);
  }

Answer 1

不确定为什么会修复它但是当我将一些代码放入处理未定义状态时，它开始正常工作

Angular下拉列表不清除项目

1 个答案: