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

Question

我的问题可能很简单，但就是找不到在诸如 (click) 之类的事件中使用管道的方法。像这样的东西：

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

我总是得到一个错误。我试图用()or{}或[]...包装它......有一些解决方法，比如将内容放在一个属性中，然后在事件中使用它，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>实际上有一个单行解决方案，它消除了对 dummy 的需要<input>，发布在此解决方案中：

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