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

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>

的需要，已发布在此解决方案中：

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

Answer 3

另一种解决方案是使用

*ngIf

模拟分配。

<ng-container *ngIf="{ text: answer$ | async } as data"> // is important to save it in an object, so it's always truthy
  <button (click)="quizAnswers(data.text)"></button>
</ng-container>

或者，如果您喜欢，也可以使用库：

*ngLet

：https://github.com/nigrosimone/ng-let