Angular 自定义列表项

在我的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>

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

---

正如您所看到的，复选框是可见的，如果我选择它们，

selectedDocTypes

变量已正确绑定。

DxList

组件没有选项，如

displayExpr

，因此要显示复杂数据，可以使用项模板

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

{{data.label}

另外，我还准备了一份

---

PS：您可以看一看，它可能更符合您的场景。

DxList

组件没有选项，例如

displayExpr

，因此要显示复杂的数据，您可以使用项目模板

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

{{data.label}

另外，我还准备了一份

---

PS：您可以看一看，它可能更符合您的场景。

我刚刚完成了这个演示：数据源（docTypes）是DocumentType的数组。DocumentType是一个具有两个属性的类：id和label。我只需要在复选框右侧显示标签，dxList显示值绑定到数据源的“文本”字段。如果数据源中没有此字段，则需要使用项模板（）。例如：我刚刚完成了这个演示：数据源（docTypes）是DocumentType的数组。DocumentType是一个具有两个属性的类：id和label。我只需要在复选框右侧显示标签，dxList显示值绑定到数据源的“文本”字段。如果数据源中没有此字段，则需要使用项模板（）。例如：你好，亚丁，非常感谢你的回复。我注意到，只有直接分配数组

docTypes

时，您的代码才能正常工作。如果从可观察对象获取值，则文本框将填充

[object]、[object]、…

，而不是标签属性。尝试在

ngOnInit

方法中使用此代码：

Observable.of（[{id:1，label:label1}，{id:2，label:label2}，]）。延迟（10）。订阅（res=>this.docTypes=res）检查。看起来一切正常，现在可以了。从DevExtreme 17.1.3传递到17.1.4进行trik。你在DexExpress工作吗？：）再次感谢亚丁，非常感谢你的回复。我注意到，只有直接分配数组
docTypes
时，您的代码才能正常工作。如果从可观察对象获取值，则文本框将填充
[object]、[object]、…
，而不是标签属性。尝试在
ngOnInit
方法中使用此代码：
Observable.of（[{id:1，label:label1}，{id:2，label:label2}，]）。延迟（10）。订阅（res=>this.docTypes=res）检查。看起来一切正常，现在可以了。从DevExtreme 17.1.3传递到17.1.4进行trik。你在DexExpress工作吗？：）再次感谢