最初のautomaticalyに基づいて2番目のリストを設定する方法は？

Question

私はngFor持っている：

<div class="ui-g" *ngFor="let orderTracking of orderTrackings" 

私はidependetている内部リスト：

<select [ngModel]="orderTracking.destinationfromCode" (ngModelChange)="orderTracking.destinationfromCode = $event"> 
    <option value=""></option> 
    <option *ngFor="let destination of groupDestinations" [value]="destination.code" [selected]="orderTracking.destinationfromCode == destination.code">{{destination.displayname}}</option>  

<select [ngModel]="orderTracking.destinationtoCode" (ngModelChange)="orderTracking.destinationtoCode = $event"> 
    <option value=""></option> 
    <option *ngFor="let destination of destinationsTo" [value]="destination.code" [selected]="orderTracking.destinationtoCode== destination.code">{{destination.displayname}}</option> 
</select> 

私は2例があります：最初のドロップダウン上のユーザーのクリックが第二の移入するとき最初のケースがあります彼が拳から選んだものに基づいています。私はこのようにしました：

<select [ngModel]="orderTracking.destinationfromCode" (ngModelChange)="orderTracking.destinationfromCode = $event" (click)="selectGroup(orderTracking.destinationfromCode)"> 

しかし、問題は、すでに両方のドロップダウンリストの値がある場合です。どのように私はそれらの両方を選ぶことができます。今すぐ最初の値を入力し、最初のドロップダウンの値を選択しますが、2番目の値はまだ入力されていません。

Answer 1

両方のドロップダウンに2ウェイデータバインドを使用します。その後、最初のドロップダウンでchangeイベントを使用します。

// component.html 
<select [(ngModel)]="orderTracking.destinationfromCode" (change)="selectGroup(orderTracking)"> 
    .... 
</select> 
<select [(ngModel)]="orderTracking.destinationtoCode"> 
    .... 
</select> 

// component.ts 
selectGroup(order){ 
    // order.destinationtoCode = someValue; 
} 

これにより、両方の項目が設定されている場合は、選択ドロップダウンに設定されます。また、最初の選択を変更すると、2番目の選択が更新されます。