Как передать переменную async в функции шаблона (действия)?

Мне нужно передать асинхронную переменную в функцию. Что-то вроде этого:

<div class="team" (click)="addToFavorite((match | async)?.id)">

И конечно у меня ошибка.

Ошибка синтаксического анализатора: не может иметь канал в выражении действия.

Может быть, есть способ преобразовать асинхронную переменную в JavaScript?

Ответы

Ответ 1

Другой вариант для простых переменных и без каких-либо наблюдаемых - записать значение переменной в скрытый ввод:

<div *ngIf="(match | async)?.id">
    <input  #myControl [value]="(match | async).id" type="hidden" />
    <div class="team" (click)="addToFavorite(myControl.value)">
</div>

Ответ 2

Вот как я это решил:

<div *ngIf="(match | async) as match" class="team" (click)="addToFavorite(match.id)">

Это коротко, просто, и это работает.

<ng-container *ngIf="(match | async) as match">
   <div class="team" (click)="addToFavorite(match.id)">
   </div>
</ng-container>

Ответ 3

Вы не можете сделать это в шаблоне.

Но вы можете:

<div class="team" (click)="addToFavorite()">

и в вашем .component.ts:

public addToFavorite() {
  this
    .match  // should retain last value (e.g. use BehaviorSubject)
    .first() // completes after passing one value only
    .subscribe(
      (matchValue) => {
        // your logic here
    });
}

Примечание: мы подписываемся (и немедленно отписываемся), аналогично async канал подписывается на Observable.

Ответ 4

Как насчет:

<div class="team" (click)="addToFavorite(match)">

а затем в вашем коде:

addToFavorite(obs: Observable<any>) {
  obs.take(1).subscribe(value => {
    addToFavoriteById(value.id);
  });
}

Ответ 5

Кажется, вам нужно использовать вспомогательный метод:

<div class="team" (click)="onClick(match)">

class MyComponent {
  onClick(event) {
    event.then(val => this.addToFavorite(val?.id);
  }
  addToFavorite(val) {
  }
}