リロードオプションを選択

Question

私は2つの選択入力を持っています：国と都市。 国を変更した後に都市を変更したいですが、都市選択を2回開いた後にのみ変更されます。 国を選んだ後のように、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 
}