Angular 角度-为什么我的变量是；“未定义”；订阅API之后？

调用API服务后，模板中有一个未定义的变量，但我在控制台中看到了预期的结果

这里有一个叫做API的视频组件

export class VideoComponent implements OnInit {
  video: Video = new Video();

  constructor(private apiService: ApiService, private route: ActivatedRoute) {
  }

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.apiService.getOneVideoByID(params['id']).subscribe((video: Video) => {
        this.video = video;
        console.log(this.video);
      });
    });
  }
}

这是我的API服务：

export class ApiService {
  PHP_API_SERVER = 'http://127.0.0.1/TutoWorld/backend/api';
  private headers;

  constructor(private httpClient: HttpClient) {
    this.headers = new HttpHeaders().set('Content-Type', 'application/json')
  }


  getOneVideoByID(id: number): Observable<Video> {
    return this.httpClient.get<Video>(`${this.PHP_API_SERVER}/readOne?id=${id}`,{headers: this.headers});
  }
}

如果有人能帮我解决这个问题，那就太好了

---

感谢您查看控制台，它似乎是一个阵列

我还想避免嵌套订阅，请尝试以下方法：

  import { switchMap } from 'rxjs/operators'; // this import could be wrong, double check
.....
  ngOnInit() {
    this.route.params.pipe(
      switchMap(params => this.apiService.getOneVideoByID(params['id'])),
    ).subscribe((video: Video) => {
      this.video = video[0];
      console.log(this.video);
    });
  }

---

谢谢，它正在工作，但我的html中有一个错误，现在我有另一个错误消息：

这是我的Iframe代码：

<iframe width="1280" height="720"
          src="https://www.youtube.com/embed/{{getVideoID(video.url) | safe}}"
          frameborder="0"
          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen>
  </iframe>

管道代码也是：

import {Pipe, PipeTransform, SecurityContext} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }
  transform(url) {
    return this.sanitizer.sanitize(SecurityContext.URL, url)
  }
}

---

为了回答这里的初始问题，我必须说您将来自API的响应（即数组）视为单个实例。这就是为什么没有定义：）

什么是未定义的

console.log（this.video）

？不，这是当我尝试在模板中访问时：视频标题：{{video.titre}

。在console.log中，我看到了良好的结果mm。。。真奇怪。如果你做

视频：{{video}
你会看到什么。您是否看到

视频标题：`在视图中显示？添加管道时没有任何变化。我的页面有一个截图：我建议您将该定义转换为

接口

，而不是

类

。您没有使用构造函数，并且在javascript中无法传输接口。我有以下错误：TS2339:类型“OperatorFunction”上不存在属性“subscribe”。我忘记了switchmap上的结束括号，请立即检查Great，它正在工作，但我的html中有一个错误，现在我有另一个错误消息：。这是我的Iframe代码：get 2：“无法读取未定义的属性‘match’和“资源URL上下文中使用的不安全值”。你可以在截图上看到第一个是正常的，我想：需要时间从api获取url，但我不理解第二个是不安全的值，可能会将其更改为

[src]=“url | safe”

，并将

url

分配给嵌入的youtube url。谢谢，它可以工作，但我也必须通过以下方式更改SafePipe类的返回：“返回此.sanitizer.bypassSecurityTrustResourceUrl（url）；“现在没事了，谢谢

<iframe width="1280" height="720"
          src="https://www.youtube.com/embed/{{getVideoID(video.url) | safe}}"
          frameborder="0"
          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen>
  </iframe>

getVideoID(url: string) {
    return this.apiService.youtube_parser(url);
  }

  youtube_parser(url) {
    let regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
    let match = url.match(regExp);
    return (match && match[7].length == 11) ? match[7] : false;
  }

import {Pipe, PipeTransform, SecurityContext} from '@angular/core';
import {DomSanitizer} from '@angular/platform-browser';

@Pipe({
  name: 'safe'
})
export class SafePipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer) { }
  transform(url) {
    return this.sanitizer.sanitize(SecurityContext.URL, url)
  }
}