Question

现在，我的Web应用程序的侧面菜单上有此视频列表。单击列表上的任何项目时，都会触发一个observable，这有助于更改视频标记的“ src”属性。但这看起来不起作用。

这是我的html文件：

 <div class="video-container video">
   <video width="400px" height="300px" controls (click)="toggleVideo()" #videoPlayer>
     <source [src]="src" type="video/mp4" /> Browser not supported   
   </video> 
 </div>

这是我的.ts文件

src;
mySubs: Subscription<string>;

constructor(private vid: VideosService) { }

ngOnInit() {
    this.src = "...some default src";
    this.mySubs = this.vid.getVodSub().subscribe(index => {
      this.src = this.vid.videos[index].src;
    });
  }

  ngOnDestroy() {
    this.mySubs.unsubscribe();
  }

正如您和我所猜到的那样，视频元素采用了我设置的初始src属性值。但是，如果在.subscribe（）方法中更改了“ src”属性，则视频src不会更改。

我也尝试通过调用src =“ getMySrc（）”之类的函数来设置src属性，但是它也不起作用。我怎样才能解决这个问题？谢谢！

Answer 1

首先，您应该在模板之外保持尽可能多的逻辑：）

我认为您应该将您的可观察对象映射到另一个视频，该视频将退还src。

尝试类似的东西：

src;
mySubs: Subscription<string>;
actualVideo: Observable<string>


constructor(private vid: VideosService) { }

ngOnInit() {
    this.actualVideo = this.vid.getVodSub().pipe(map(index => {
        return this.vid.videos[index].src;
    }));
}

然后在模板中使用异步管道：

<source [src]="actualVideo | async" type="video/mp4" />

https://angular.io/api/common/AsyncPipe

如何在HTML文件中使用可观察对象？

1 个答案: