NgFor仅支持绑定到可迭代对象,例如数组IONIC 4

问题描述 投票:-1回答:1

我正在开发离子4项目。我想在ion-select

中显示国家列表

我想通过单击按钮打开列表。当我尝试使用静态值时,它可以完美工作。

我还尝试通过以下方式转换数组中的响应:this.countryList = Array.of(this.countryList);

我的回答是一个数组。但是仍然给我错误:

错误错误:未捕获(承诺):错误:找不到其他类型为“对象”的支持对象“ [对象对象]”。仅NgFor支持绑定到可迭代对象,例如数组。

回复:

[{“ id”:“ 1”,“ name”:“所有”,“ flag_img”:“ https://codehub.biz/knowledgeup/API/images/7515332518demo.jpg”},{“ id”: “ 2”,“名称”:“印度”,“ flag_img”:“ https://codehub.biz/knowledgeup/API/images/7617116068bg.png”},{“ id”:“ 3”,“名称”: “美国”,“ flag_img”:“ https://codehub.biz/knowledgeup/API/images/4413910583ON40S50.jpg”}] >>

authService.ts

getData(type) {
    return new Promise((resolve, reject) => {
      let data: Observable<any> = this.http.get(baseURL + type);
      data.subscribe(response => {
        // console.log("Auth GET Response : " , response);
        resolve(response);
      }, err => {
        console.log("Error", err);
        reject(err);
      }, () => {
        console.log('completed');
      });

    });
  }

tab1.html

<ion-item [hidden]='hideList'>
    <ion-label>Choose Country</ion-label>
      <ion-select placeholder="Country" #countryList (ionChange)="chooseCountry()" [(ngModel)]="userCountry">
        <ion-select-option *ngFor="let item of countryList" value="{{item.id}}" >{{item.name}}</ion-select-option>
      </ion-select>
  </ion-item>

<ion-buttons slot="primary">
  <ion-button (click)='displayCountry()'>
    <ion-icon slot="icon-only" name="globe"></ion-icon>
  </ion-button>
</ion-buttons>

tab1.ts

public countryList: any;
  userCountry: any;
hideList = true;
  @ViewChild('countryList', { static: false }) countrySelectRef: IonSelect;

ngOnInit() {
    if (localStorage.getItem('userId')) {
      this.isLogin = true
      this.userId = JSON.parse(localStorage.getItem('userId'));
      this.userName = JSON.parse(localStorage.getItem('userName'));
      this.userCountry = JSON.parse(localStorage.getItem('userCountry'));
      if (this.userCountry == null || this.userCountry == "") {
        this.isCountry = false;
      } else {
        this.isCountry = true
      }
    } else {
      this.isLogin = false;
    }

    console.log("isLogin : " + this.isLogin);
  }

getCountries(){
    this.authService.getData("getcountries.php").then((result) => {
      this.countryList = result;
      // this.countryList = Array.of(this.countryList);

      console.log(this.countryList);
    }, (err) => {
      console.log("Error", err);
    });
  } 

displayCountry() {
    this.countrySelectRef.open();
 }

chooseCountry(){
    console.log(this.userCountry);
    localStorage.setItem('userCountry', JSON.stringify(this.userCountry));
  }

我正在开发离子4的项目。我想在离子选择中显示国家/地区列表,我想单击按钮打开列表。当我尝试使用静态值时,它可以完美工作。我也尝试过...

angular api object ionic4 ngfor
1个回答
0
投票

我这个声明在这里出错了。请按以下方式声明countryList

© www.soinside.com 2019 - 2024. All rights reserved.