NgFor поддерживает только привязку к итерациям, таким как массивы IONI C 4 - PullRequest
Новая
       32

NgFor поддерживает только привязку к итерациям, таким как массивы IONI C 4

0 голосов
/ 01 апреля 2020

Я занимаюсь разработкой проекта в ioni c 4.
Я хочу показать список стран в ion-select

Я хочу открыть список по щелчку кнопка.
Когда я пытаюсь со значением stati c, оно работает отлично.

Я также пытался преобразовать ответ в массиве следующим образом:
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 "," name ":" USA "," 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));
  }

1 Ответ

0 голосов
/ 01 апреля 2020

Я бы порекомендовал вам попробовать асин * трубу c в шаблоне для этой цели. Для достижения этой функции вам необходимо преобразовать список стран в ReplaySubject. Также, если вы ожидаете массив в качестве ответа, лучше, чтобы переменная также была массивом. Если вам нужна какая-либо документация, вот вся документация для Rx Js https://www.learnrxjs.io/ Для начала работы с Rx Js: https://www.npmjs.com/package/rxjs

В html

<ion-select-option *ngFor="let item of countryList|async">{{item.name}}</ion-select-option>

В ц 

public countryList: ReplaySubject<any[]>=new ReplaySubject()

getCountries(){
   this.authService.getData("getcountries.php").then((result) => {
      this.countryList.next(result);
      console.log(this.countryList);
    }, (err) => {
      console.log("Error", err);
    })
}
...