具有多个插入的 rxjs 运算符答案

【问题标题】：rxjs operators with multiple inserts具有多个插入的 rxjs 运算符
【发布时间】：2019-03-19 04:35:33
【问题描述】：

我将如何在 Angular 6 中使用 rxjs 来插入项目，然后在插入后我需要将不同类型的文件上传到不同的端点，并将新的项目 ID 作为子键，而不必嵌套所有这些调用。

createItemWithAttachments(data:any)
{    
   this.itemService.insert(data.item).subscribe((newItem:Item)=>{       
        //attachment type 1s 
        if(data.attachmentType1.length > 0){    
         this.attachmentService.upload(data.attachmentType1, 
            "type1", newItem.id).subscribe(newAttachment=>{

         });    
    }    

    //attachment type 2s 
    if(data.attachmentType2.length > 0){    
         this.attachmentService.upload(data.attachmentType2, 
             "type2", newItem.id).subscribe(newAttachment=>{    

         });    
    }    
    });    
}

【问题讨论】：

标签： angular rxjs6

【解决方案1】：

最好的方法是使用mergeMap 与merge 和last 一起从合并中获取最后发出的值。您必须确定在of() 中放入什么。这应该是 undefined/void 0/null 如果您从 upload 调用返回一个对象，或者如果您从上传返回一个数组，则应该是一个空数组 []：

createItemWithAttachments({ item, attachmentType1: type1, attachmentType2: type2 }): void {
  this.itemService.insert(item).pipe(
    mergeMap(({ id }: Item) => {
      const mergeUpload = [
        ...(type1.length ? [this.attachmentService.upload(type1, "type1", id)] : []),
        ...(type2.length ? [this.attachmentService.upload(type2, "type2", id)] : [])
      ];

      return mergeUpload.length ? merge(...mergeUpload) : of([]);
    }),
    last()
  ).subscribe((newAttachments) => {

  });
}

【讨论】：

我实际上是从上传中返回一个项目，因为它映射了一堆其他属性，有没有办法让最后一个调用完成？
newAttachments 将包含一个数组，其中包含按该顺序排列的合并数组的响应。这还不够吗？
我有附件服务返回一个带有嵌套附件的项目，所以想知道如何获取在 mergemap 中完成的最后一个项目
非常感谢，我现在正在学习这个，rxjs 具有挑战性。
@Fab 欢迎您，您是对的。运营商的数量是压倒性的！祝你好运:)

【解决方案2】：

我认为有多种方法可以解决此问题，但其中一种方法可能是：

this.itemService.insert(data.item)
    .pipe(
        take(1),
        mergeMap((newItem:Item) => {
            const attachmentUpdateObservables = [];
            if(data.attachmentType1.length > 0){
              attachmentUpdateObservables.push(this.attachmentService.upload(data.attachmentType1, "type1", newItem.id));
            }

            if(data.attachmentType2.length > 0){
              attachmentUpdateObservables.push(this.attachmentService.upload(data.attachmentType2, "type2", newItem.id));
            }

            return combineLatest(attachmentUpdateObservables);

        })
    .subscribe(newAttachments => {
        // Do something
    });

【讨论】：

我在 mergeMap 下有一条红线，它需要 ObservableInput，我正在尝试理解 mergeMap，所以不确定我还缺少什么。类型 'OperatorFunction' 不可分配给类型 'ObservableInput'。我认为 combineLatest 是罪魁祸首，mergeMap 想要返回 Observable
如果我猜我需要像这样包装 combineLastest：return of(combineLatest(attachmentUpdateObservables));
combineLatest 应该返回一个 Observable，因此不必将其包装在 of() 中。我猜这个错误可能是因为“attachmentUpdateObservables”可能是一个空数组。不确定 combineLatest 如何处理空数组，但看起来 PierreDuc 有一个解决方案，即“return merge.length ? forkJoin(merge) : of([]);”。另一个潜在的原因可能是 combineLatest 是从错误的地方导入的。应该是“从 'rxjs' 导入 { combineLatest }。
我刚刚意识到我已经从 import { combineLatest } from 'rxjs/operators' 导入了它；它返回 OperaterFunction，我将其更改为 import { combineLatest } from 'rxjs';它确实返回一个可观察的。非常感谢。