时间戳

首页 > 解决方案 > 异步管道到 src 图像属性 - Angular 2+

angular - 异步管道到 src 图像属性 - Angular 2+

问题描述

我对可观察和异步管道有问题。我在我的组件中输入了 Observable。在控制器中并在 ngOnInit 中订阅 observable 我得到有效值。问题出在模板中，我没有在模板上获得有效值。我想在图像 src 属性中有异步。

TvShowComponent（返回 Observable）

    public getCoverLink(): Observable<string> {
      return this.tvShowForm.get('cover').valueChanges.pipe(map((coverLink:  string) => {
        return coverLink;
      }));
  }

TvShowComponent 模板（使用嵌套组件）

<fp-cover-thumbnail [coverLink$]="getCoverLink()"></fp-cover-thumbnail>

CoverThumbnailComponent (with Input()) @Input() public coverLink$: Observable;

ngOnInit() {
    this.coverLink$.subscribe(data => {
        console.log(data); // works here
    });
}

CoverThumbnailComponent 模板（但不适用于此处：（）

<div class="cover-thumbnail-container">
<img #cover [src]="(coverLink$ | async)"> <!-- here not work -->
coverLink: {{ (coverLink$ | async) }} <!-- also here not work -->
</div>

标签： angularimageasynchronouspipeobservable

解决方案

问题是这一行：

<fp-cover-thumbnail [coverLink$]="getCoverLink()"></fp-cover-thumbnail>

您正在传递一个返回Observable<string>良好的方法，该方法在 Angular 中不起作用。

您需要创建一个Observable<string>并将其分配给它。前任。

coverLink$: Observable<string>;

然后在ngOnInit或任何你想调用该方法的地方。

this.coverLink$ = this.getCoverLink();

你的 html 然后变成<fp-cover-thumbnail [coverLink$]="coverLink$"></fp-cover-thumbnail>

或者，您不需要将 an 传递Observable给您的子组件，您可以这样做<fp-cover-thumbnail [coverLink]="coverLink$ | async"></fp-cover-thumbnail>，您Input()的子组件现在可以只是一个字符串。

推荐阅读