如何 return 服务函数作为 Angular 7 中的可观察对象？

Question

我有这个 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

如何 return 从 BasicOperationService 的 delete() 方法作为可观察对象？

Answer 1

也许我误会了，但你也许应该

return service.delete(id);

并且不订阅。

然后，仅在使用该服务的组件中进行订阅。

Answer 2

您可以使用 Rxjs "of" 以可观察的方式提供数据，例如

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);
       }))
  }

然后你在组件里订阅

Update 正如 IngoBürk 在他的评论中所说，在这种情况下不使用 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" 必须是一个对象。如果你想 return 一个不同的可观察对象，"switchMap" 是有用的 - 这是因为在 swithmap 中你必须 return 一个可观察对象 -

如何 return 服务函数作为 Angular 7 中的可观察对象？

How to return a service function as an observable in Angular 7?

observable

angular

angular-observable

angular7