如何将 api 的数据绑定到 ng-multiselect-dropdown？答案

【问题标题】：how to bind data of api into ng-multiselect-dropdown?如何将 api 的数据绑定到 ng-multiselect-dropdown？
【发布时间】：2019-04-11 09:28:39
【问题描述】：

我想将数据绑定到多选下拉列表中，怎么可能？

HTML 代码：

<div class="form-group">
    <!--
    <select class="form-control custom-selec" formControlName='stoppage_point'>  
        <option *ngFor="let cities of city.data" [(ngValue)]="cities.city">{{cities.city}}</option>  
    </select>
    -->
    <ng-multiselect-dropdown
        name="city"
        [placeholder]="'Select City'" 
        [data]="city.data" 
        formControlName="city" 
        [disabled]="disabled" 
        [settings]="dropdownSettings" 
        (onSelect)="onItemSelect($event)">
    </ng-multiselect-dropdown>
</div>

.ts 文件代码：

this.http.get(environment.api_url + `/admin/get_only_city/`
).subscribe((data:any[])=> {
  console.log(data);
  this.city = data;
  var i; 
  for(i=0;i<=8;i++){
    console.log(this.city.data[i]['_id']) ;
  }

  this.dropdownSettings = {
    singleSelection: false,
    selectAllText: 'Select All',
    unSelectAllText: 'UnSelect All',
    itemsShowLimit:5,
    allowSearchFilter: true
  };
});

我想在下拉列表中显示所有记录，但它不显示值。

我不会如何绑定数据中的特定值，请问有人可以帮我解决这个问题吗？

【问题讨论】：

标签： html angular6 dropdown

【解决方案1】：

请查看我的example Stackblitz

您调用一个网络服务并将结果数据提取到一个数组中。并将这个数组推送到下拉列表中。

  getData(): void {
    let tmp = [];
    this.http.get<any>('https://jsonplaceholder.typicode.com/users').subscribe(data => {
      for(let i=0; i < data.length; i++) {
        tmp.push({ item_id: i, item_text: data[i].name });
      }
      this.dropdownList = tmp;
    });
  }

【讨论】：

如何避免重复项，有什么想法吗？

【解决方案2】：

把return放到this.dropdownList中

getData(): void {
    let tmp = [];
    this.http.get<any>('https://jsonplaceholder.typicode.com/users').subscribe(data => {
      for(let i=0; i < data.length; i++) {
        tmp.push({ item_id: i, item_text: data[i].name });
      }
      return this.dropdownList = tmp;
    });
  }
console.log(this.dropdownList);

【讨论】：