首页 文章

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

提问于
浏览
2

我尝试用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不允许在表达式中使用管道...而且我不想订阅任务$并将其转换为成员变量(最佳做法是保持任务$为难以置信的风格RXJS编程?!)

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

2 回答

  • 5

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

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

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

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

相关问题