在angular上创建到youtube频道的链接

我正在尝试将我的youtube频道与我的angular应用程序链接

我尝试了以下操作，但发现了错误：

Error:Uncaught（在promise中）：TypeError：您在需要流的地方提供了“undefined”

我的page.ts文件是：

import { Component, OnInit } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { YoutubeService } from './youtube.service'
import { takeUntil } from 'rxjs/operators';
import { Observable } from 'rxjs';

@Component({
selector: 'app-coachingtips',
templateUrl: './coachingtips.page.html',
styleUrls: ['./coachingtips.page.scss'],
})
export class CoachingtipsPage implements OnInit {
videos: any[];
unsubscribe$: Observable<any>;

constructor(private youTubeService: YoutubeService) { }

ngOnInit() {
this.videos = [];
this.youTubeService
.getVideosForChanel('MY-CHANNEL-ID', 3)
.pipe(takeUntil(this.unsubscribe$))
.subscribe(lista => {
for (let element of lista["items"]) {
this.videos.push(element)
}
});
}}

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class YoutubeService {

apiKey : string = 'MY-API-KEY';

constructor(public http: HttpClient) { }

getVideosForChanel(channel, maxResults): Observable<Object> {
let url = 'https://www.googleapis.com/youtube/v3/search?key=' + this.apiKey + '&channelId='   
+ channel + '&order=date&part=snippet &type=video,id&maxResults=' + maxResults
return this.http.get(url)
  .pipe(map((res) => {
    return res;
  }))
}}

从'@angular/core'导入{Component，OnInit}；
从'@angular/common/http'导入{HttpClientModule}；
从“/youtube.service”导入{YoutubeService}
从“rxjs/operators”导入{takeUntil}；
从“rxjs”导入{Observable}；
@组成部分({
选择器：“应用程序coachingtips”，
templateUrl:'./coachingtips.page.html'，
样式URL:['./coachingtips.page.scss']，
})
导出类CoachingtipsPage实现OnInit{
视频：任何[]；
unsubscribe$：可观的
您不需要使用
Take，直到（this.unsubscribe$）
，http订阅在组件被销毁时自动删除，这就是您遇到问题的原因

import { Component } from '@angular/core';
import { AppService } from './app.service';

@Component({
selector: 'app-coachingtips',
templateUrl: './coachingtips.page.html',
styleUrls: ['./coachingtips.page.scss'],
})
export class CoachingtipsPage implements OnInit {
  videos: any[];
  constructor(private youTubeService: YoutubeService) {
  }
  ngOnInit() {
    this.videos = [];
    this.youTubeService.getVideosForChanel('MY-CHANNEL-ID', 3)
    .subscribe(lista => {
      for (let element of lista["items"]) {
        this.videos.push(element)
        }
    });
  }
}

它应该工作得更好，现在您应该有一个400 http错误：
API密钥无效。请传递一个有效的API密钥
。因此使用有效的API密钥应该可以

我设法在这里重现您的问题：
您能显示
console.log（this.videos）
的结果吗？谢谢Michael，已经添加了console.log的图片。这是您想要的吗？是的，所以它完全是空的，rest api会返回什么吗？很抱歉，这是一个新问题，如果我使用网址+apiKey，它会返回这样的：“种类”：“youtube#searchListResponse”、“etag”：“QOyiAc#U b-CM8RON3ITMXH1MAH0”、“nextPageToken”：“CAUQAA”、“regionCode”：“GB”、“pageInfo”：{“totalResults”：1000000，“resultsPerPage”：5您可以显示
console.log（lista）的结果吗
因为我在rest api响应中没有看到任何属性
项
。非常感谢！非常感谢您的帮助！