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

Question

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

comp.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。）

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

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

标签： angular5

Answer 1

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

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

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