Question

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

许多Firebase专家建议这样做＆＃34;尽可能尝试使用|在angular2中异步并防止手动订阅！＆＃34; - 不想手动订阅任务$并将其转换为数组的原因。

例如：

我在组件的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));

}

在我的模板中，我可以使用asular管道在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

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

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

Answer 2

我解决问题的方法是我为按钮创建了一个变量并将其值传递给处理程序。 Observable也必然会重视财产。

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

Answer 3

您可以使用"*ngIf as"：

<div *ngIf="(task$ | async) as task">
  <button (click)="deleteTask(task.id)">Delete</button>
</div>

如何在Angular2

3 个答案: