如何在angualr 2應用程序中使用typescript顯示基於其他下拉值的下拉值

Question

我正在開發角度2應用程序，在我當前的項目中我希望顯示基於year，make，model的下拉值的功能。例如，如果我選擇本田，然後在模型下拉列表中只顯示本田模型。

默認情況下，我將綁定年份，品牌和型號的完整數據。

這是我的看法。

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> 

我會從我自己的API的上述數據。

您能否告訴我如何在angular 2應用程序中爲上述功能編寫打印腳本代碼。

-Pradeep

Answer 1

你需要做的是，跟蹤change事件您選擇輸入和改變另一個選擇輸入源的唯一的事情。 Angular2將完成其餘的工作。

使用選定value：

@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 = []; 
    } 
    } 
} 

實時演示：https://plnkr.co/edit/GDXsPt4aiS7vus6oPvuU?p=preview

UPDATE

或者你可以使用selectedIndex： （注意-1引起你的第一個 「選擇」 -item。

@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 = []; 
    } 
    } 
} 

實時演示：https://plnkr.co/edit/wugNC6S27FB48EtRN906?p=preview