如何将可观察值内的值传递给 Angular2 中的（单击）处理程序

我尝试使用 Angular 2 学习可观察编程，但我没有得到一个重要的点 - 如何在模板级别的（单击）事件中传递可观察值中的值（无需订阅 TS 文件中的可观察值，并且将可观察值转换为成员变量）。

正如许多 Firebase 专家建议的那样，“只要有可能，请尝试在 angular2 中使用 | async 并防止手动订阅！” - 不想手动订阅task$并将其转换为数组的原因。

例如：

我的组件 TS 文件中有这个：

task$: Observable<Task>;

this.task$ = this.tasksService.findTaskById(taskId);

在我的服务中，这是使用 AngularFire 调用 firebase 的代码，它返回一个可观察值：

import {Task} from "../model/task";
constructor(private db:AngularFireDatabase, @Inject(FirebaseRef) fb) {
   this.sdkDb = fb.database().ref();
}

findTaskById(id:string):Observable<Task> {

  return this.db.object('tasks/' + id).map(task => Task.fromJson(task));

}

在我的模板中，我可以毫无问题地在 Angular2 中使用带有异步管道的值，如下所示：

<md-card-title>{{(task$ | async)?.title}}</md-card-title>

但是然后我有一个按钮需要此任务中的 $id 值，如下所示：

<button md-button *ngIf="(authInfo$ | async)?.isLoggedIn()" (click)="deleteTask((task$ | async)?.$key)">Delete</button>

这不起作用，因为单击不允许在表达式内使用管道...而且我不想订阅任务 $ 并将其转换为成员变量（将其保留为可观察风格 RXJS 编程的任务 $ 的最佳实践？！）

那么我如何获取 $key 值，因为它最初不存在并且我无法使用异步管道！？

对于向任何东西添加点击处理程序的一般情况，而不仅仅是<button>，您可以使用隐藏的<input>元素来保存 Promise/Observable 流的最新值，然后从其他元素访问该值。

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