Ionic3中YouTube API数据无法在视图渲染的问题排查

从你的描述和代码来看，问题出在数据结构的遍历层级错误上——控制台能打印数据说明API请求没问题，但视图里只显示空条目，是因为你没正确访问到视频标题的层级。

问题根源 #

YouTube Data API返回的结构是一个包含items数组的对象（简化后如下）：

{
  items: [
    { snippet: { title: "视频标题1" } },
    { snippet: { title: "视频标题2" } },
    // ...更多视频项
  ]
}

你在组件里把整个API返回对象赋值给了this.Ecvideos，然后在模板里直接遍历Ecvideos，接着尝试访问Ecvideo.items.snippet.title——这相当于在整个API返回对象里找items，而不是遍历items数组里的单个视频项。

修复步骤 #

1. 修正组件的数据赋值

把this.Ecvideos = ytdata;改成直接取API返回里的items数组，这样Ecvideos就变成了可直接遍历的视频列表：

ytapiUrl = "https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId='blahblahbla'";
getECvideolists(){
 return new Promise(resolve => {
  this.httpClient.get(this.ytapiUrl).subscribe(ytdata => {
   this.Ecvideos = ytdata.items; // 重点：直接赋值items数组
   resolve(ytdata);
   console.log(ytdata);
  }, err => {
   console.log(err);
  });
 });
}

2. 修正模板的遍历与取值

现在Ecvideos是视频项数组，遍历后每个Ecvideo就是单个视频对象，直接访问snippet.title即可：

<ion-list *ngSwitchCase="'videos'">
 <ion-item *ngFor="let Ecvideo of Ecvideos">
  <h2>{{Ecvideo.snippet.title}}</h2>
 </ion-item>
</ion-list>

额外优化建议 #

你用Promise包裹HttpClient的订阅有点冗余，HttpClient本身返回Observable，可以用toPromise()简化代码：

import { tap } from 'rxjs/operators';

// ...

getECvideolists(){
  return this.httpClient.get(this.ytapiUrl).pipe(
    tap(ytdata => {
      this.Ecvideos = ytdata.items;
      console.log(ytdata);
    })
  ).toPromise();
}

这样修改后，视图应该就能正常显示每个视频的标题了。

内容的提问来源于stack exchange，提问作者Peter B