Angular2、根据父下拉选择过滤嵌套下拉列表

Question

我正在 Kendo 下拉菜单 Angular 2 应用程序中。我有两个下拉列表，第二个下拉列表的列表取决于第一个下拉列表的选择。在组件端，我可以看到它的过滤正确列表，但第二个下拉列表总是显示与第一个列表相同的列表，不知道为什么！

模板

<div>

 <p>Listed Clients</p>

  <kendo-dropdownlist [data]="clientsData" [(ngModel)] = "selectedClient" [textField]="'name'" [valueField]="'id'"  (ngModelChange)="onChangeClientSelection($event)" class="full-width">
  </kendo-dropdownlist>
</div>


<div *ngIf="consultationsData">
   {{consultationsData[0].name}}

     <p>Listed Consultation</p>

   <kendo-dropdownlist [data]="consultationsData" [(ngModel)] = "selectedClient" [textField]="'name'" [valueField]="'id'"  (ngModelChange)="onChangeClientSelection($event)" class="full-width">
  </kendo-dropdownlist>

</div>

组件

export class myComponent implements OnInit {

 private clientConsultationDataItem:any;
 private clientsData:any[];
 private consultationsData:any;

 private getClientFilterConsultation(clientReference:any){
   this.clientConsultationDataItem.forEach(element => {

  if(clientReference["id"] == element.client["id"]){
    this.consultationsData = element.consultations;
    console.log("listed consultation ", this.consultationsData);
   }
 });
}


public onChangeClientSelection(event:any)
{
  console.log("dropdown event fired", event);
  this.getClientFilterConsultation(event);
}

Answer 1

我把 NgModel 弄错了

<div *ngIf="consultationsData">

 <p>Listed Consultation</p>
  <kendo-dropdownlist name='ConList'
   [data]="consultationsData" 
   [(ngModel)] = "selectedConsultation" 
   [textField]="'name'" 
   [valueField]="'id'" 
   class="full-width">
  </kendo-dropdownlist> 
</div>

Answer 2

您还可以查看以下级联下拉列表的文档示例：

DOCS DEMO