Angular 2，基于父级下拉选择的过滤嵌套嵌套下拉列表

Question

我正在Angular 2应用程序中的Kendo Drop-down工作。我有两个下拉列表，列出的第二个下拉列表取决于第一个下拉列表的选择。在组件方面，我可以看到其过滤正确列表，但是第二个下拉列表始终显示与第一个相同的列表，不确定为什么！

模板

<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

您还可以查看以下层叠DropDownLists的文档示例：

DOCS DEMO