如何在 Angular Dual-Listbox 中绑定 JSON 数组

Question

我正在使用"Angular Dual-Listbox"， 我创建了演示，它工作正常，但是当我添加 JSON 数组作为源时，它不会在 UI 上显示任何内容。

补偿.html

<dual-list [source]="source" [(destination)]="confirmed"></dual-list>

比较

export class UploadQuestionSetComponent implements OnInit {
source: any;
confirmed = [];
target = [];
constructor(private uploadQuestionSetService : uploadQuestionSetService) { }
ngOnInit() {
//following array works fine
//this.source = ["bhagvat","kailash","rakesh"];
//but i need to bind json array 
this.source = [
{ "id": "1", "name": "bhagvat"},
{"id": "2","name": "kailas"},
{"id": "3","name": "rakesh"}]
}
}

根据他们提供的文件：

• key - 源中每个对象的唯一标识符字段和 目标数组，默认值为 _id。 (注意：使用数组的源 的字符串，每个字符串都是其自己的 ID。

• 显示 - 每个字段 对象用于显示每个列表的对象，默认为_name。 或者，返回可用于显示的字符串的函数 一个对象。(注意：使用字符串数组的源，每个字符串 是它自己的显示器。

我测试了这个，但它不会显示任何东西，你能看到这里吗，谢谢

Answer 1

花了 3-4 个小时后，我终于在这里解决了我的问题:)

<dual-list [source]="source"  key="id" display="name"  [(destination)]="confirmed"></dual-list>

• 您需要添加 key="id" 是每个对象的唯一 ID。
• display="name" 是要显示的名称。