Question

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

TvShowComponent（可观察到返回）

    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（带有Input（）） @Input（）public coverLink $：可观察；

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>

Answer 1

问题是此行：

<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>

或者，您无需将Observable传递给子组件，您只需执行<fp-cover-thumbnail [coverLink]="coverLink$ | async"></fp-cover-thumbnail>，此时您在子组件上的Input()就可以只是一个字符串。

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

1 个答案: