асинхронный канал в атрибут изображения src - Angular 2+ - PullRequest
Новая
       18

асинхронный канал в атрибут изображения src - Angular 2+

0 голосов
/ 02 октября 2018

У меня проблема с наблюдаемой и асинхронной трубой.У меня есть вход в мой компонент с Observable.В контроллере и при подписке на наблюдаемые в ngOnInit я получаю допустимые значения.Проблема в шаблоне, я не получаю допустимые значения в шаблоне.Я хочу иметь асинхронный атрибут image src.

TvShowComponent (return 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 (с вводом()) @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>

1 Ответ

0 голосов
/ 02 октября 2018

Проблема заключается в следующей строке:

<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() на вашем дочернем компоненте теперь может быть просто строкой.

...