angualr 2アプリケーションでtypescriptを使用して他のドロップダウン値に基づいてドロップダウン値を表示する方法

Question

現在のプロジェクトでは、angle 2アプリケーションを開発していますが、year、make、modelに基づいてドロップダウン値を表示する機能が必要です。たとえば、ホンダを選択した場合、ホンダのモデルのみがモデルのドロップダウンに表示されます。

デフォルトでは、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の上方からデータを取得します。

上記の機能のために、角度2アプリケーションでタイスクリプトコードを書く方法を教えてください。

-Pradeep

Answer 1

あなたがしなければならない唯一の事はあなたの選択、入力のchangeイベントを追跡し、別の選択・入力のソースを変更する、です。 Angular2は残りを行います。

@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 （ノートを選択valueを使用して

-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