时间戳

首页 > 解决方案 > 创建绑定到现有函数的 Observable

angular - 创建绑定到现有函数的 Observable

问题描述

我一直在尝试将包中的onCompleteItem数组函数绑定ng2-file-upload到我可以订阅的 RxJS Observable 方法。

这是我正在谈论的功能：

onCompleteItem(item: FileItem, response: string, status: number, headers: ParsedResponseHeaders): any;

..which 在使用中几乎与以下内容相同：

onCompleteItem(item: any, response: any, status: any, headers: any)

这是MyComponent的相关部分，目前正在运行：

imageArray: Image[] = [];

uploader:FileUploader = new FileUploader({
  url: '/api/FileUpload'
});

ngOnInit() {

  this.uploader.onCompleteItem = (item: any, response: any, status: any, headers: any) => {
    const data = JSON.parse(response);
    data.forEach(x => {
      console.log(x);
      this.imageArray.push(x);
    }
    this.uploader.removeFromQueue(item);
  };

}

我尝试将它绑定到 Observable 是通过使用 RxJSbindCallback函数：

bindCallback(this.uploader.onCompleteItem, {item: any, response: any, status: any, headers: any})().pipe(
  tap((item, response) => {
    const data = JSON.parse(response);
    this.uploader.removeFromQueue(item);
    const images = data.map(x => console.log(x) );
    this.imageArray.push(...images);
  })
).subscribe();

由于一些类型/语法错误，这不起作用。有人对如何将此重写为绑定的 Observable 函数有任何好的建议吗？

标签： angulartypescriptobservableng2-file-upload

解决方案

bindCallback包装一个在订阅 observable 时调用的函数，例如getJSON(url, callback). 您试图通过传递callback参数来使用它。

相反，您可以尝试该fromEventPattern函数，它允许您通过它的两个参数指定如何注册事件处理程序，以及如何取消注册。

const {fromEventPattern} = rxjs;

const uploader = {
  upload() {
    setTimeout(() => {
      if (this.onCompleteItem) this.onCompleteItem('arg 1', 'arg 2');
    }, 1000);
  }
};

const source = fromEventPattern(handler => uploader.onCompleteItem = handler, _ => uploader.onCompleteItem = null);

source.subscribe(([arg1, arg2]) => console.log(arg1, arg2));
uploader.upload();
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.4/rxjs.umd.js"></script>

推荐阅读