如何在 Angular 7 中将服务函数作为可观察对象返回？答案

【问题标题】：How to return a service function as an observable in Angular 7?如何在 Angular 7 中将服务函数作为可观察对象返回？
【发布时间】：2019-05-31 12:11:34
【问题描述】：

我有这个 service.ts 代码：

export class BasicOperationService {

  constructor() { }

  delete(service: any, object: any, data: any): Observable<any> {
    const id = this.getId(object);
    let index: number;

    for (let i = 0; i < data.length; i++) {
      if ( data[i].id === id) {
        index = i;
        break;
      }
    }

    return service.delete(id).subscribe(result => {
        data.splice(index, 1);
        return data;
      }, error => {
        console.log(error);
        return data;
      });
  }
}

我有这个component.ts：

delete(object: any, id: number) {
  this.loadingId = id;

  this.basicOperation.delete(this.photoalbumService, object, this.content.data)
    .subscribe(result => {
      this.content.data = result;
      this.loadingId = 0;
    });
}

现在我收到此错误消息：

TypeError: this.basicOperation.delete(...).subscribe is not a function

如何从 BasicOperationService 的 delete() 方法中返回一个 observable？

【问题讨论】：

你应该在服务中返回service.delete(id).pipe(...)，在管道中你可以清理你的数据。调用 subscribe 返回一个订阅。
@netdjw，不订阅服务（真的是个坏主意）。你有一个服务并且想要返回一个 observable，看我的回答

标签： angular observable angular7 angular-observable

【解决方案1】：

也许我理解错了，但你也许应该

return service.delete(id);

不订阅。

然后，只订阅使用该服务的组件。

【讨论】：

从技术上讲，splice() 可以在 map() 等运算符中完成，以避免需要在消费组件中完成。
@AlexanderStaroselsky 没错，您可以将副作用链接到 return 语句。
@KeenanDiggs, service.delete(id) 返回一个服务，但你没有数据。你什么都没有

【解决方案2】：

您可以使用 Rxjs “of”将数据作为 observable 提供，例如

return of({id:1,data:"hello word})

但是，在您的情况下，您必须使用 switchMap，因为您必须等待 service.delete 完成。

delete(service: any, object: any, data: any): Observable<any> {
    const id = this.getId(object);
    let index: number;

    for (let i = 0; i < data.length; i++) {
      if ( data[i].id === id) {
        index = i;
        break;
      }
    }

    return service.delete(id).pipe(
       //we don't return the result of delete, else "data.splice"
       switchMap(result =>{
           data.splice(index,1);
           return of(data);
       }))
  }

然后你在组件中订阅

更新正如 IngoBürk 在他的 cmets 中所说，在这种情况下不要使用 switchMap，你可以使用 map。

delete(service: any, object: any, data: any): Observable<any> {
    ...
    return service.delete(id).pipe(
       map((result)=>{
           data.splice(index,1);
           return data;
       }))
  }

“map”转换结果，“return”必须是一个对象。如果你想返回一个不同的 observable，"switchMap" 是 util - 这是因为在 swithmap 中你必须返回一个 observable-

【讨论】：

switchMap 在这里没有意义，splice 不会返回 observable。
.pipe(map( ... )) 组合得到了@ABOS 在问题评论中建议的正确结果，谢谢！
@IngoBürk，你是对的。必须是（数据）的返回，在代码中正确，感谢您的建议
@IngoBürk，不要在意那些没有意义的东西，谢谢你强迫我改进我的答案，