Angular 6 的剑道重用具有不同 ngModel 属性的 DropDownList答案

【问题标题】：kendo for Angular 6 reuse DropDownList with different ngModel propertyAngular 6 的剑道重用具有不同 ngModel 属性的 DropDownList
【发布时间】：2019-03-04 00:06:54
【问题描述】：

我正在尝试为 Angular 6 的多个剑道 DropDownList 重用代码

<kendo-dropdownlist
    [data]="listItems"
    textField="text"
    valueField="value"
    [(ngModel)]="selectedItem">
</kendo-dropdownlist>

通过使用 *ngFor="let item of items" 模板。

let items = [[ngModel1, ngModel2, ngModel3]]

有没有一种方法可以用来将 ngModel 与我的 items 数组中的多个实例绑定？

有人有什么想法吗？

谢谢

【问题讨论】：

您是否希望拥有三个独立的 DropDownLists？或者你想连接 ngModel1、ngModel2 和 ngModel3？
将 ngModel1、ngModel2 和 ngModel3 分开。重用相同的 Html 但不是复制粘贴 3 次几乎相同的 Html 代码，而是使用模板或其他东西来重用代码...

标签： angular kendo-ui-angular2

【解决方案1】：

您可以使用 let-dataItem 指令。

要定义项目模板，请在组件标签内嵌套一个带有 kendoTemplate 指令的标签。然后将模板上下文设置为当前组件。要获取对当前数据项的引用，请使用 let-dataItem 指令。

所以 dataItem 的 selectedItem 将存储模型值。

帮助API：https://www.telerik.com/kendo-angular-ui/components/dropdowns/api/ItemTemplateDirective/

<ng-template kendoGridEditTemplate let-dataItem="dataItem" let-formGroup="formGroup">
    <kendo-dropdownlist 
       [data]="listItems" 
       textField="text" 
       name="text" 
       valueField="value"
      [(ngModel)]="dataItem.selectedItem">
    </kendo-dropdownlist>
  </ng-template>

【讨论】：