自定义列表项

Question

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

这是我的 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>

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

如您所见，复选框是可见的，如果我 select 它们 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，可能更符合你的场景

自定义列表项

Customize list item

devextreme

angular