Wie man die Dropdown-Werte basierend auf anderen Dropdown-Wert mit Typoskript in Angual 2 Anwendung

Question

anzeigen Ich entwickle Winkel 2 Anwendung, in meinem aktuellen Projekt möchte ich die Funktionalität zur Anzeige Dropdown-Werte basierend auf Jahr, Marke, Modell. Wenn ich zum Beispiel Honda auswähle, dann werden nur Honda-Modelle im Dropdown-Menü angezeigt.

Standardmäßig binde ich die kompletten Daten für Jahr, Marke und Modell.

Das ist meine Ansicht.

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> 

Ich werde die oben genannten Daten aus meiner eigenen API erhalten.

Können Sie mir bitte sagen, wie man den Typoskript-Code in angular 2 Anwendung für die oben genannte Funktionalität schreibt.

-Pradeep

Answer 1

Das einzige, was Sie tun müssen, ist, verfolgen die change Ereignis Ihrer select-Eingang und die Quelle eines anderen select-Eingang ändern. Angular2 wird den Rest erledigen.

Verwenden des value ausgewählt:

@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

UPDATE

Oder können Sie die selectedIndex verwenden: (beachten Sie, dass Ihre erste "Select" verursachen -1

@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