Question

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

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
  };
});

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

我不怎么绑定数据中的特定值，所以有人可以帮我解决这个问题吗？

Answer 1

请检查我的example Stackblitz

您调用一个Web服务并将结果数据提取到一个数组中。然后将这个数组放入下拉列表。

  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;
    });
  }

Answer 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);

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

2 个答案: