如何在Angular2中将observable中的值传递给(click)处理程序

Question

我尝试用Angular 2学习可观察的编程但是我没有得到一个重要的观点 - 如何在模板级别的(click)事件中传入一个observable中的值(没有在TS文件中订阅observable和将可观察值转换为成员变量).

正如许多Firebase专家所说的那样"尽可能在angular2中使用| async并防止手动订阅!" - 不想手动订阅任务$并将其转换为数组的原因.

例如:

我在组件的TS文件中有这个:

task$: Observable<Task>;

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

在我的服务中,这是使用AngularFire调用firebase的代码,它返回一个observable:

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>

这不会起作用,因为click不允许在表达式中使用管道......而且我不想订阅任务$并将其转换为成员变量(最佳做法是保持任务$ for obserable style RXJS编程？!)

那么我如何得到$ key值,因为它最初不存在,我不能使用异步管道!？

Answer 1

对于向任何事物(不仅仅是a)添加点击处理程序的一般情况<button>,您可以使用隐藏<input>元素来保存promise/observable流的最新值,然后从其他元素访问该值.

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