Angular Rxjs：Observable 不显示在视图上答案

【问题标题】：Angular Rxjs: Observable does not display on viewAngular Rxjs：Observable 不显示在视图上
【发布时间】：2020-05-13 18:19:00
【问题描述】：

我有以下代码应该显示音频文件的长度：

ngAfterViewInit() {
    this.duration$ = fromEvent(this.player.nativeElement, 'loadeddata').pipe(
      map((event: any) => {
        return this.convertDuration(event.target.duration);
      }));
  }

但它不会显示在我的 HTML 中，如下所示： <div>{{ duration$ | async }}</div>

这可能是什么问题？我尝试订阅我的组件，这很有效：

this.duration$.subscribe(x => console.log(x));

初始化：duration$: Observable<string>;

看了@EliyaCohen 的演示后，我意识到我的代码不起作用的原因是因为我启用了ChangeDetectionStrategy.OnPush。我认为我现在的问题是如何在不调用 detectChanges() 或 markForChange() 的情况下触发更改检测。

这是我的demo。

【问题讨论】：

控制台中的任何javascript错误？如果将return this.convertDuration(event.target.duration); 替换为return 10; 是否有效？
没有错误。已经尝试放置一个虚拟字符串和相同的结果。正如我所说，subscribe() 函数按预期工作，所以奇怪的是为什么它不在 HTML 中打印。
如果没有完整的代码，我想不出任何东西。 this.duration$.subscribe(x => console.log(x)); 在 ngAfterViewInit 赋值后使用？
这就是整个代码。我已经添加了我如何初始化我的变量。 convertDuration() 返回持续时间的 mm:ss 格式。 this.duration$.subscribe(x => console.log(x)); 在作业下方，我只添加了该行来测试可观察对象是否有效。它不是真正的代码的一部分。
你可以试试<div *ngIf="duration$">{{ duration$ | async }} </div>

标签： angular typescript rxjs angular-observable

【解决方案1】：

我认为它应该这样工作：

@Component({
  /* ... */
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class PlayerComponent implements AfterViewInit {
  duration$: Observable<string>;

  @ViewChild("video", { static: true }) player: ElementRef<HTMLElement>;
  @Input() source: string;

  ngOnInit() {
    this.duration$ = fromEvent(this.player.nativeElement, "loadeddata").pipe(
      map((event: any) => event.target.duration)
    );
  }
}

我使用的是{ static: true }，因为video 元素不依赖于任何条件，例如ngIf。

ngAfterViewInit 的问题在于 异步管道 将在此生命周期挂钩发生之前创建其订阅。这意味着在调用ngAfterViewInit 时，异步管道将已经计算出它的订阅，但是由于这发生在此钩子之前，因此没有订阅，因此没有可订阅的内容。

【讨论】：

好的，谢谢！这完全符合现在的预期。

【解决方案2】：

我无法重现您的问题，所以我创建了a simple demo，这可能会有所帮助（不要介意代码和框的错误）。

我创建了一个<video> 标签
我绑定了video标签并调用它从@ViewChild导入
在ngAfterViewInit 上，我使用了您所做的确切代码，但没有使用convertDuration，因为我不确定它到底是做什么的。
我在 HTML 中订阅了 observable 并且它起作用了。

如果你能分享一点你的代码，我也许可以重现它。

【讨论】：

我在摆弄你的演示，我意识到我的代码在哪里不同。我启用了ChangeDetectionStrategy.OnPush。这是我的code 版本，它有OnPush，这就是它停止工作的时候。如何在此处触发变更检测？