如何从 ionic 3 中的 api 访问数组数据答案

【问题标题】：How to access array data from api in ionic 3如何从 ionic 3 中的 api 访问数组数据
【发布时间】：2018-10-19 09:12:37
【问题描述】：

我想访问数组数据并在 ion-select 中显示这些数据。

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"
]

如何在我的离子选择选项中访问这些值。我做不到。

【问题讨论】：

console.log(this.item) 无效。您只想打印item 还是this.items？
我只想要这些值在 ion-select..
console.log(response) 在 subscribe 内部打印什么？
console.log(response) 打印整个回复。我在上面的问题中附上了我的回复图片...显示 console.log(response) 的图片。

标签： angular ionic-framework

【解决方案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);
           });
        });

【讨论】：

中缺少 [ngMode)]="item"