如何在Ionic 3中从API访问数组数据

Question

我要访问阵列数据并以离子选择方式显示此数据。

html

<ion-item>
   <ion-label>Select Time</ion-label>
      <ion-select  interface ="popover">
        <div *ngFor="let item of items">
           <ion-option > {{item}}</ion-option>
        </div>
      </ion-select>

ts文件

ionViewDidLoad(){

   let url = 'http://mysiteurl/wp-json/wp/v2/authores/4';

    this.http.get(url, this.config.options).map(res => res.json())
          .subscribe((response: any) => {
              this.items = response;
              response.forEach(item => 
              console.log(this.item));
       }, (err) => {
           let alert = this.alertCtrl.create({
           title: 'Error',
          subTitle: 'Please check your credentials',
          buttons: ['OK']
          });
      alert.present();
    });
   }
 }

这是我的api响应

[
"09:00 AM -12:00 PM",
"12:00 PM - 03:00 PM",
"05:00 PM - 07:00 PM"
]

如何在我的离子选择选项中访问这些值。我无法做到这一点。

Answer 1

@saif khan ..删除html中的空格

 <ion-item>
       <ion-label>Select Time</ion-label>
          <ion-select [(ngModel)]="item" interface ="popover">
            <div *ngFor="let item of items">
               <ion-option>{{item}}</ion-option>
            </div>
          </ion-select>

，然后在组件中

 this.http.get(url, this.config.options)
    .map(res => res.json()).subscribe((response: any) => {
          this.items = response;   //this will store your response in items
          response.forEach(item => {
          //if you want print each item in the console
          console.log(item);
           });
        });