angular - 重新加载选择选项

Question

我有两个选择输入:国家/地区和城市。 我想在更改国家/地区后更改城市，但只有在我打开城市选择两次后它们才会更改。 好像我选择国家后，ngFor循环并没有立即运行。

选择国家/地区后如何立即更改城市选项？

<div class="form-group">
  <label for="country">Country</label>
  <select class="form-control" id="country" name="country" #countrySelect>
    <option *ngFor="let country of countries" [value]="country.id">{{country.name}}</option>
  </select>
</div>

<div class="form-group">
  <label for="city">City</label>
  <select class="form-control" id="city" name="city" #citySelect [(ngModel)]="publisher.cityId">
    <option *ngFor="let city of cities"
            [hidden]="countrySelect.value != city.countryId"
            [value]="city.id">
      {{city.name}}
    </option>
  </select>
</div>

Answer 1

您可以使用change指令。 以下是如何执行此操作的示例。首先，您必须构建一个自定义函数来过滤每个国家/地区的城市

<select (change)="onChange($event.target.value)">
  <option *ngFor="let country of countries" [value]="country.id">{{country.name}}</option>
</select>

 <select class="form-control" id="city" name="city" #citySelect [(ngModel)]="publisher.cityId">
<option *ngFor="let city of filteredCities"
        [hidden]="countrySelect.value != city.countryId"
        [value]="city.id">
  {{city.name}}
</option>

allCities = [];
filteredCities = [];
allCountries = [];

onChange(country) {
   filteredCities = [];//You empty filterdCities
   //Then filter allCities variable according to selected country values and add values to 
}