在 Ionic 3 中找不到未定义的属性 Featured

Question

我正在研究 Ionic 框架。我已经从 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

尝试改变这个

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);
        })

Answer 3

你可以试试这个

ts文件代码

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

html文件代码

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