如何在Angular 7中将服务函数作为可观察值返回？

Question

I have this service.ts code:

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

And I have this 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;
    });
}

And now I get this error message:

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

How can I return from BasicOperationService's delete() method as an observable?

Answer 1

Maybe I'm misunderstanding, but you perhaps you should

return service.delete(id);

and not subscribe.

Then, subscribe only in the the component that consumes the service.

Answer 2

you can serve data as observable using Rxjs "of", eg

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

But, in your case, you must use switchMap, because you must wait to service.delete finish.

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

Then you subscribe in the component

Update as IngoBürk say in his comments, in this case NOT use switchMap, just you can use map.

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

"map" transform the result and the "return" must be an object. "switchMap" is util if you want to return a different observable -this is because in swithmap you must return an observable-