web-dev-qa-db-fra.com

Comment afficher les valeurs de liste déroulante en fonction d'une autre valeur à l'aide de TypeScript dans Angular 2 application

Je développe une application angulaire 2; dans mon projet actuel, je veux la fonctionnalité permettant d'afficher des valeurs de liste déroulante basées sur l'année, la marque, le modèle. Par exemple, si je sélectionne Honda, seuls les modèles Honda sont affichés dans la liste déroulante. 

Par défaut, je lierai les données complètes pour l'année, la marque et le modèle.

Ceci est mon point de vue.

 enter image description here

VehicleComponent.html

  <div class="row form-group">
                                    <div class="col-md-3">
                                        <label  class="control-label">Year*</label><br />
                                        <select  friendly-name="Year" id="year" name="year" class="col-md-6 form-control"  ng-required="true" onchange='OnChange()' >
                                            <option>Select</option>

                                            <option *ngFor='let type of lookupdetailsvehicleyearinfo'>{{type.LookupValue}}</option>

                                        </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label  class="control-label">Make*</label><br />
                                        <select friendly-name="Make" class="col-md-6 form-control" ng-required="true" >
                                            <option>Select</option>
                                            <option *ngFor='let type of lookupdetailsvehiclemakeinfo'>{{type.LookupValue}}</option>
                                            </select>
                                    </div>
                                    <div class="col-md-3">
                                        <label  class="control-label">Model*</label>
                                        <select  friendly-name="Model" class="col-md-6 form-control" ng-required="true" >
                                            <option>Select</option>
                                            <option *ngFor='let type of lookupdetailsvehiclemodelinfo'>{{type.LookupValue}}</option>
                                           </select>
                                    </div>                                      
                                </div>

Je vais obtenir les données ci-dessus à partir de mes propres API.

Pouvez-vous s'il vous plaît me dire comment écrire le code TypeScript dans l'application angulaire 2 pour la fonctionnalité ci-dessus.

angulartypescriptdrop-down-menu
4
pradeep

La seule chose à faire est de suivre l’événement change de votre entrée de sélection et de changer la source d’une autre entrée de sélection. Angular2 fera le reste.

Utilisation de la value sélectionnée:

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>

      <select (change)="firstDropDownChanged($event.target.value)" >
        <option>Select</option>
        <option *ngFor='let v of _values1'>{{ v }}</option>
      </select>

      <select >
        <option>Select</option>
        <option *ngFor='let v of _values2'>{{ v }}</option>
      </select>
    </div>
  `,
})
export class App {
  name:string;

  private _values1 = ["1", "2", "3"];
  private _values2 = [];

  constructor() {
    this.name = 'Angular2'
  }

  firstDropDownChanged(val: any) {
    console.log(val);

    if (val == "1") {
      this._values2 = ["1.1", "1.2", "1.3"];
    }
    else if (val == "2") {
      this._values2 = ["2.1", "2.2", "2.3"];
    }
    else if (val == "3") {
      this._values2 = ["3.1", "3.2", "3.3"];
    }
    else {
      this._values2 = [];
    }
  }
}

live-demo: https://plnkr.co/edit/GDXsPt4aiS7vus6oPvuU?p=preview

METTRE &AGRAVE; JOUR

Ou vous pouvez utiliser la variable selectedIndex: (notez que -1 cause votre premier élément "Select".

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>

      <select (change)="firstDropDownChanged($event.target.selectedIndex - 1)" >
        <option>Select</option>
        <option *ngFor="let v of _values1">{{ v.val }}</option>
      </select>

      <select >
        <option>Select</option>
        <option *ngFor='let v of _values2'>{{ v }}</option>
      </select>
    </div>
  `,
})
export class App {
  name:string;

  private _values1 = [
    { id: 1, val: "huhu" },
    { id: 2, val: "val2" },
    { id: 3, val: "yep" },
    { id: 4, val: "cool" }
  ];
  private _values2 = [];

  constructor() {
    this.name = 'Angular2'
  }

  firstDropDownChanged(val: any) {
    const obj = this._values1[val];
    console.log(val, obj);

    if (!obj) return;

    if (obj.id == 1) {
      this._values2 = ["1.1", "1.2", "1.3"];
    }
    else if (obj.id == 2) {
      this._values2 = ["2.1", "2.2", "2.3"];
    }
    else if (obj.id == 3) {
      this._values2 = ["3.1", "3.2", "3.3"];
    }
    else {
      this._values2 = [];
    }
  }
}

live-demo: https://plnkr.co/edit/wugNC6S27FB48EtRN906?p=preview

8
mxii

Ng5-Dynamic Selectoption - Menu déroulant permettant de sélectionner un pays, puis un état, puis un district.

template.html

Bonjour pays/état/villes 

<select (change)="countryChange($event)" >
  <option>Select</option>
  <option *ngFor="let c of countries" [ngValue]="c.country">{{ c.country }}</option>
</select>

<select (change)="statesChange($event)">
  <option>Select</option>
  <option *ngFor='let state of states' [ngValue]="state.name">{{ state.name }}</option>
</select>

<select >
  <option>Select</option>
  <option *ngFor='let city of cities' [ngValue]="city">{{ city }}</option>
</select>

composant.ts

var countries = [{ "pays": "Afghanistan", "États": [ {"nom": "Nurestan", "villes": ["c1", "c2", "c3"]}, {"nom": "Oruzgan", "villes": ["orc1", "oruc2", "oruc3"]}, {"nom": "Panjshir", "villes": ["3c1", "3c2", "3c3"]} ] }, { "pays": "Albanie", "États": [ {"nom": "Korce", "villes": ["c1", "c2", "c3"]}, {"nom": "Kukes", "villes": ["orc1", "oruc2", "oruc3"]}, {"nom": "Lezhe", "villes": ["orc1", "oruc2", "oruc3"]}, {"nom": "Shkoder", "villes": ["orc1", "oruc2", "oruc3"]}, {"nom": "Tirane", "villes": ["orc1", "oruc2", "oruc3"]} ] },
{ "pays": "Antarctique", "États": [] }
]

states= []; cities = [];
countryChange(e){
  console.log(e.target.value)
  this.countries.filter(element => {
    if(element.country == e.target.value){
      console.log(element.states[0],"first state")
      this.states = element.states;
    }
  });
  this.cities = []
}
statesChange(evt){
  console.log(evt.target.value,this.states)
  this.states.filter( element =>{
    if(element.name == evt.target.value){
      this.cities = element.cities;
    }
  })
}
0
gnganpath