Question

我正在使用“ Angular Dual-Listbox”，我创建的演示程序运行良好，但是当我将json数组作为源添加时，它不会在ui上显示任何内容。

comp.html

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

comp.ts

  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"}]

      }
    }

根据他们提供的文档：

键-源中每个对象的唯一标识符字段，目标数组，默认值为_id。（注意：带有数组的源字符串，每个字符串都是其自己的ID。）
显示-每个字段用于显示每个列表对象的对象，默认值为_name。或者，一个函数返回一个可用于显示的字符串一个东西。（注意：带有字符串数组的源，每个字符串是它自己的显示。）

我对此进行了测试，但没有显示任何内容，谢谢。

Answer 1

花了3-4个小时后，我终于可以在这里解决我的问题了：）

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

您需要添加key =“ id”是每个对象的唯一ID。
display =“ name”是要显示的文件名。

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

1 个答案: