Angular 2 - 在（点击）事件中使用管道

Question

我的问题可能很简单但是却找不到在像（点击）这样的事件中使用管道的方法。像这样：

<button (click)="quizAnswers(answer?.texte | translate | async)"></button>

我总是收到错误。我尝试用()或{}或[]包裹它... 有一些解决方法，比如将内容放在属性中，然后使用this.attribute在事件中获取它，但我确信有正确的方法！

提前感谢您的帮助

Answer 1

解决方法是在单击处理程序函数中调用管道：

function quizAnswers(answer)
{
    let translatePipe= new TranslatePipe();
    ...
    return translatePipe.transform(answer?.texte);
}

Answer 2

我刚刚遇到同样的问题。操作表达式不能包含async管道。但是，您可以使用隐藏的<input>元素来保存promise / observable流的最新值，然后在任何位置访问该值。

  <input #dummy style="{display: none}" type="text" value="{{ myAsyncSource | async }}">
  <a (click)="myFunction(dummy.value)">{{ dummy.value }}</a>

对于<button>的情况，实际上是一个单行解决方案，无需使用虚拟<input>，已发布in this solution：

 <button type="button" #item value="{{i$ | async}}"  (click)="buttonClicked(item.value)">BUTTON</button>