离子 - 选择 - 可搜索不显示任何项目

时间:2018-04-19 19:31:25

标签: angular cordova ionic-framework

我正在使用Ionic select-searchable插件,因为我有一个用户可以搜索的大量品牌列表。我的代码目前看起来像这样:

TS代码

// Brand
brandList: Brand[] = [];
selectedBrandModel: Brand;

this.http.get(this.singleton.URL_GET_BRANDS, options).map(res => res.json()).subscribe(data => {
    for(let tempBrand of data) {
      for(let tempSubBrand of tempBrand.Brands) {
        this.brandList.push({id: tempSubBrand.id, name: tempSubBrand.name});
        console.log("CREATED ID: " + tempSubBrand.id + " W NAME " + tempSubBrand.name);
      }
    }

    console.log(this.brandList);
  }, err => {

  }, () => {
    // this.selectCondition();
});

HTML

<ion-item style="margin-top: 10px">
    <select-searchable
      #productBrand
      title="Brand"
      [(ngModel)]="selectedBrandModel"
      [items]="brandList"
      itemValueField="id"
      itemTextField="name"
      [canSearch]="true"
      (onChange)="change($event)"
    >
    </select-searchable>
  </ion-item>

所有文档都遵循,然而,列表只返回空。有没有人知道为什么会发生这种情况?

1 个答案:

答案 0 :(得分:0)

我有一个类似的问题-初始化select-searchable时项目未定义,并且怀疑有计时问题,我添加了一个* ngIf来确保只有在加载列表时才初始化可搜索项。对我来说,它解决了这个问题:

<ion-item style="margin-top: 10px">
<select-searchable *ngIf="brandList"
  #productBrand
  title="Brand"
  [(ngModel)]="selectedBrandModel"
  [items]="brandList"
  itemValueField="id"
  itemTextField="name"
  [canSearch]="true"
  (onChange)="change($event)"
>
</select-searchable>