2017-12-28 3 views
0

Ich habe zwei Auswahleingänge: Land und Stadt. Ich möchte Städte geändert haben, nachdem ich das Land gewechselt habe, aber sie werden nur geändert, nachdem ich die Stadt zweimal geöffnet habe. Es scheint, nachdem ich Land gewählt habe, wird ngfor Zyklus nicht sofort ausgeführt.Optionen neu laden

Wie kann ich Änderungen von Städten Optionen sofort nach der Auswahl eines Landes?

<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> 

Antwort

1

Sie können 10 Richtlinie verwenden. Hier ist ein Beispiel, wie Sie es tun können. Zunächst müssen Sie eine custum Funktion bauen Städte filtern pro Land

<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 
} 
+0

Es funktioniert gut, vielen Dank für Ihre Idee –

+0

Gern geschehen. Dann als akzeptierte Antwort markieren, um anderen in der gleichen Situation zu helfen –