Comment lier la liste déroulante en cascade dans la table en utilisant Angular 4 tapuscrit?

Question

Selon mon plunker (regarder plunker ci-dessous boîte de commnet) chaque fois que je change de pays de la première rangée puis lier en conséquence la liste déroulante état entier de la première colonne.je veux lier l'état de la liste déroulante en conséquence, mais dans la même rangée. l'aide sera très appréciée.

Answer 1

Le problème dans votre code est que vous ne différenciez pas chaque liste déroulante d'état. Vous utilisez le même states pour les trois, alors lorsque vous changez la liste d'état pour un pays, vous réinitialisez les deux autres également.

J'ai légèrement modifié le code pour utiliser l'index number, de cette façon chaque liste déroulante d'état maintient sa propre liste et peut être définie séparément sans affecter les autres.

component.ts:

export class CountryListComponent implements OnInit { 

    initState = new State(0, 0, 'Select'); 
    selectedCountry:Country[] = []; 
    countries: Country[]; 
    states: State[] = []; 

    allStates: State[] = []; 

    constructor(private _dataService: DataService) { 
    this.selectedCountry = [new Country(0, 'India', this.initState),new Country(0, 'India', this.initState),new Country(0, 'India', this.initState)]; 
    this.numbers = Array(3).fill().map((x,i)=>i); 
    this.countries = this._dataService.getCountries(); 
    this.states = [[], [], []] 
    } 

    ngOnInit(){ 
    this.allStates = this._dataService.getStates(); 
    } 

    onSelect(countryid,index) { 
    console.log(countryid, index) 
    this.states[index] = this.allStates.filter((item)=> item.countryid == countryid)); 
    console.log(this.states); 
    } 

    onStateSelect(stateid, index){ 
    console.log(stateid, index); 
    this.selectedCountry[index].state = this.allStates.filter((item)=> item.id == stateid)); 
    console.log(this.selectedCountry[index].state); 
    } 
} 

html:

<table> 
    <tr *ngFor="#number of numbers"> 
    <td> 
     <label>Country:</label> 
     <select [(ngModel)]="selectedCountry[number].id" (change)="onSelect($event.target.value, number)"> 
     <option value="0">--Select--</option> 
     <option *ngFor="#country of countries" value={{country.id}}>{{country.name}}</option> 
     </select> 
    </td> 
    <td> 
     <div> 
     <label>State:</label> 
     <select [(ngModel)]="selectedCountry[number].state.id" (change)="onStateSelect($event.target.value, number)"> 
      <option *ngIf='selectedCountry[number].state.id == 0' value="0">--Select--</option> 
      <option *ngFor="#state of states[number]" value={{state.id}}>{{state.name}}</option> 
     </select> 
     </div> 
    </td> 
    </tr> 
</table> 

Plunker demo

Answer 2

Créer une directive pour le pays en cascade et les États laissent tomber vers le bas. En utilisant la directive, la validation du modèle de formulaire fonctionne à partir de la boîte dans Angular 4.

J'ai prolongé l'échantillon de plâtre de Nehal en utilisant des directives. L'exemple de plunker que j'ai fourni n'a pas de validation implémentée.

Plunker example