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>

我有两种情况：第一种情况是用户点击第一个下拉列表，根据他从拳头中选择的内容填充第二个下拉列表。我是这样做的：

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

但问题是当用户已经拥有两个下拉列表的值时。如何填充选择它们。现在它只是首先填充并选择第一个下拉列表的值，但第二个尚未填充。

Answer 1

我会对两个下拉列表使用双向数据绑定。然后在第一个下拉列表中使用change事件。

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

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

这可确保如果两个项目都已设置，则会在选择下拉列表中设置它们。此外，如果您更改第一个选择，它将更新第二个选择。

如何根据第一个自动填充第二个列表？

1 个答案: