运行时错误 - 无法读取未定义的属性“url”

Question

我正在使用 ionic 版本 3 开发我的应用程序，我正在使用 youtube REST API 从我的 youtube 播放列表中获取视频，但是视频缩略图未显示在我的应用程序中，并且我收到错误“运行时错误 - 无法读取未定义的属性 'url'"

以下是用于获取视频缩略图并将其显示在应用中的特定代码行：

<img [src]="list.snippet.thumbnails.standard.url">

其余代码如下所示： 媒体.html

<ion-header>
  <ion-navbar color="secondary">
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Media Gallery</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-item>
    <ion-label stacked>Channel ID</ion-label>
    <ion-input type="text" [(ngModel)]="channelId"></ion-input>
  </ion-item>
  <button full ion-button (click)="searchPlaylists()" [disabled]="channelId === ''" color="primary">Search Playlists</button>

  <ion-list no-padding>
    <button ion-item *ngFor="let list of playlists | async" (click)="openPlaylist(list.id)">
      <ion-thumbnail item-start>
        <img [src]="list.snippet.thumbnails.standard.url">
    </ion-thumbnail>
    <h2>{{ list.snippet.title }}</h2>
    <p>{{ list.snippet.publishedAt | date:'short' }}</p>
    </button>
  </ion-list>
</ion-content>

---

媒体.ts

import { YtProvider } from './../../providers/yt/yt';
import { Component } from '@angular/core';
import { NavController, AlertController } from 'ionic-angular';
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'page-media',
  templateUrl: 'media.html'
})
export class MediaPage {

  channelId = 'UCwsAikVrhBuJMIAfXB6SiqA'; // Devdactic Channel ID
  playlists: Observable<any[]>;

  constructor(public navCtrl: NavController, private ytProvider: YtProvider, private alertCtrl: AlertController) { }

  searchPlaylists() {
    this.playlists = this.ytProvider.getPlaylistsForChannel(this.channelId);
    this.playlists.subscribe(data => {
      console.log('playlists: ', data);
    }, err => {
      let alert = this.alertCtrl.create({
        title: 'Error',
        message: 'No Playlists found for that Channel ID',
        buttons: ['OK']
      });
      alert.present();
    })
  }

  openPlaylist(id) {
    this.navCtrl.push('PlaylistPage', { id: id });
  }
}

下面是更多代码 播放列表.ts

import { YtProvider } from './../../providers/yt/yt';
import { Observable } from 'rxjs/Observable';
import { Component } from '@angular/core';
import { NavController, NavParams, Platform } from 'ionic-angular';
import { YoutubeVideoPlayer } from '@ionic-native/youtube-video-player';


@Component({
  selector: 'page-playlist',
  templateUrl: 'playlist.html',
})
export class PlaylistPage {
  videos: Observable<any[]>;

  constructor(private navParams: NavParams, private ytProvider: YtProvider, private youtube: YoutubeVideoPlayer, private plt: Platform) {
    let listId = this.navParams.get('id');
    this.videos = this.ytProvider.getListVideos(listId);
  }

  openVideo(video) {
    if (this.plt.is('cordova')) {
      this.youtube.openVideo(video.snippet.resourceId.videoId);
    } else {
      window.open('https://www.youtube.com/watch?v=L658-04LHvQ&t=25s' + video.snippet.resourceId.videoId);
    }
  }
}

播放列表.html

<ion-header>
    <ion-navbar color="secondary">
      <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
      </button>
      <ion-title>Recent Videos</ion-title>
    </ion-navbar>
  </ion-header>
<ion-content>
    <ion-list>
      <button ion-item *ngFor="let video of videos | async" (click)="openVideo(video)" detail-none>
        <ion-thumbnail item-start>
        <img [src]="video.snippet.thumbnails.standard.url">
      </ion-thumbnail>
      <h2>{{ video.snippet.title }}</h2>
      <p>{{ video.snippet.description }}</p>
      </button>
    </ion-list>
  </ion-content>

在控制台上显示：

etag
:
""_gJQceDMxJ8gP-8T2HLXUoURK8c/3XMZ7f8hgOqWSV9kp7zDUUp_xJk""
id
:
"PLXFzaYMJZXC8SVlwr_QktPPHhuyF2751M"
kind
:
"youtube#playlist"
snippet
:
channelId
:
"UCwsAikVrhBuJMIAfXB6SiqA"
channelTitle
:
"Amos Wambugu"
description
:
""
localized
:
{title: "KSSSA Games", description: ""}
publishedAt
:
"2018-02-20T15:26:30.000Z"
thumbnails
:
{default: {…}, medium: {…}, high: {…}, standard: {…}, maxres: {…}}
title
:
"KSSSA Games"
__proto__
:
Object
__proto__
:
Object
1
:
{kind: "youtube#playlist", etag: ""_gJQceDMxJ8gP-8T2HLXUoURK8c/XsEY4LCHcg2nXaAhhAkPqM1NxkI"", id: "PLXFzaYMJZXC_ooZUokrKDUIW1jmsfKAVY", snippet: {…}}
2
:
{kind: "youtube#playlist", etag: ""_gJQceDMxJ8gP-8T2HLXUoURK8c/cMgewOZqKa5imaBdXF3S_UsNm8Y"", id: "PLXFzaYMJZXC_8t4WTurPUZaINWUFfRwKQ", snippet: {…}}
3
:
{kind: "youtube#playlist", etag: ""_gJQceDMxJ8gP-8T2HLXUoURK8c/ksH2BayWOw44KODHKLbtEn9L3nM"", id: "PLXFzaYMJZXC8d1HLvOVDQNVNGaNss5IIY", snippet: {…}}
4
:
{kind: "youtube#playlist", etag: ""_gJQceDMxJ8gP-8T2HLXUoURK8c/c2ls-Or5pI4mXGMxY49UFYWye1w"", id: "PLXFzaYMJZXC8oxp6QTxAU2KWm27YlOzIl", snippet: {…}}
5
:
{kind: "youtube#playlist", etag: ""_gJQceDMxJ8gP-8T2HLXUoURK8c/uMlRzlJIxaeRaBCK9bEY8THsrm8"", id: "PLXFzaYMJZXC8ZYJSBKfx6yK9DT0XgdF2E", snippet: {…}}
length
:
6
__proto__
:
Array(0)


​

Answer 1

试试这个

<img [src]="list?.snippet?.thumbnails?.standard?.url">

您可以使用它来消除异常。

Answer 2

这意味着您的请求响应中不包含该属性。交叉检查 json 数据并确保正确解析它

Answer 3

因此，当我遇到此错误时，通常意味着您正在尝试使用尚未设置的对象。因此您正在尝试使用未定义的属性。基本上

<img [src]="list.snippet.thumbnails.standard.url">

在您从服务器取回 http 请求并设置列表对象之前正在运行。

我对此的解决方案是将 http 调用包装在 ionViewCanEnter() 函数中。并且只有在返回 http 调用并设置对象后才解析并进入视图。

ionViewCanEnter() {
  return new Promise((resolve, reject) => {
    var reobj = {'complete':true};
      this.returnStyleInfo('http', 'mcfarland').subscribe((data) => {
        this.styles = data;
        resolve(reobj);
      });
    });
}

而调用returnStyleInfo()的函数只是一个http get请求。

returnStyleInfo(urlprefix, datasource): Observable<any>{
  return this.http.get(urlprefix+'://demoapp.iescentral.com/appJson/read/'+datasource+'?format=json')
}

还要记得在页面顶部导入“可观察”

import {Observable} from 'rxjs/Observable';