自定义列表项

Question

在我的Angular应用程序中，我正在尝试开发一个包含复选框列表的下拉菜单，以便允许多个选择。

这是我的HTML代码：

<dx-drop-down-box
    [(value)]="selectedDocTypes"
    displayExpr="label"
    [dataSource]="docTypes">
    <div *dxTemplate="let contentData of 'content'">
        <dx-list 
            selectionMode="multiple"
            [dataSource]="docTypes"
            [showSelectionControls]="true"
            [(selectedItems)]="selectedDocTypes">
        </dx-list>
    </div>
</dx-drop-down-box>

使用此代码，drop下载为空。这是组件的屏幕截图：

如您所见，复选框可见，如果我选择它们，则selectedDocTypes变量会正确绑定。

Answer 1

DxList组件没有选项，例如displayExpr，因此要显示复杂数据，您可以使用项目模板。

<dx-list
  selectionMode="multiple"
  [dataSource]="docTypes"
  [showSelectionControls]="true"
  [(selectedItemKeys)]="selectedDocTypes">
  <div *dxTemplate="let data of 'item'">
    {{data.label}}
  </div>
</dx-list>

另外，我准备了plunker sample。

PS：您可以查看DxTagBox component，它可能与您的方案更兼容。