Question

我正在研究离子框架。我已经从API获取JSON。我已经成功获取了所有数据，但是问题是，当我尝试在页面上显示数据时，出现了Can not read property **Featured** of undefined错误。

我的Featured.ts是：

import { ApiProvider } from './../../providers/api/api';
import { Component } from '@angular/core';
import { IonicPage, NavController } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';


@Component({
  selector: 'page-featured',
  templateUrl: 'featured.html',
})
export class FeaturedPage {
  videos: Observable<any>;

  constructor(public navCtrl: NavController, public apiProvider: ApiProvider) { 
    this.videos = this.apiProvider.getVideos();
     this.videos
    .subscribe(data => {
      console.log('my data: ', data);
    })
  }
}

我的Featured.html是：

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>My First List</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-list>
  hey
    <h1 ion-item *ngFor="let fetch of videos.data.featured" >
      <ion-icon name="{{item.icon}}" item-left></ion-icon>
      {{fetch.category_name}}
      <div class="item-note" item-right>
        <youtube-player
                        content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; frame-src *;"
                        [videoId]="fetch.video_id_" (ready)="savePlayer($event)"
                        (change)="onStateChange($event)"></youtube-player>
      </div>
    </h1>
  </ion-list>
</ion-content>

我的JSON是：

{
    "api_status": "200",
    "api_version": "1.0",
    "data": {
        "featured": [{
            "id": 254,
            "video_id": "hsIL3Lgshbmh3sP",
            "user_id": 13,
            "title": "Dear Future Generations: Sorry | by Prince ea",
            "description": "Dear Future Generations: Sorry | by Prince ea <br>The sole purpose of this inspirational video is to raise awareness about the alarming rates of deforestation and the reckless destruction of our environment for which we all are responsible. This video tries to inspire the people of this world that immediate action must be taken to stop the destruction of the forests and to bring mainstream attention to this issue. This video teaches us that it is up to us to take care of this planet, it is our only home. To betray nature is to betray us, to save nature is to save us. Nothing will matter at last because if we don&#039;t work together to save the environment, we will be equally extinct. <br>Prince Ea, an activist, and inspirational spoken word artist has done it again this is one of the most powerful videos I have ever seen about mitigating climate change.",
            "thumbnail": "https:\/\/i.ytimg.com\/vi\/eRLJscAlk1M\/maxresdefault.jpg",
            "video_location": "https:\/\/www.youtube.com\/watch?v=eRLJscAlk1M",
            "youtube": "eRLJscAlk1M",
            "vimeo": "",
            "daily": "",
            "time": 1529352372,
            "time_date": "2018-06-18 20:06:12",
            "active": 0
        }]
    }
}

Answer 1

您需要将data设置为this.videos而不是订阅者本身：

在您的打字稿中：

this.apiProvider.getVideos()
.subscribe(data => {
    this.videos = data;
     console.log('my data: ', data);
})

现在在您的html for循环中像这样：

*ngFor="let fetch of videos?.data?.featured"

希望这会有所帮助！

Answer 2

您可以尝试

ts文件代码

videos:any;
this.apiProvider.getVideos().subscribe(data => {
    this.videos = data;
     console.log('my data: ', data);
})

html文件代码

*ngFor="let fetch of videos?.data?.featured"

Answer 3

尝试更改此

this.videos = this.apiProvider.getVideos();
     this.videos
    .subscribe(data => {
      console.log('my data: ', data);
    })

到

this.apiProvider.getVideos().subscribe(data => {
this.videos = data;          
console.log('my data: ', data);
        })

找不到Ionic 3中的undefined属性Featured

3 个答案: