如何在模板（动作）函数中传递异步变量？

Question

我需要将异步变量传递给函数。像这样：

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

当然，我有一个错误。

解析器错误：动作表达式中不能包含管道。

也许有一种方法可以在JavaScript中转换异步变量？

Answer 1

这是我解决的方法：

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

Answer 2

对于简单变量且没有任何可观察对象的另一种选择是将变量的值写入隐藏的输入中：

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