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

时间:2019-01-04 22:38:06

标签: angular observable angular7 angular-observable

我有这个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()方法返回可观察的结果?

2 个答案:

答案 0 :(得分:2)

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

return service.delete(id);

不订阅。

然后,仅订阅使用该服务的组件。

答案 1 :(得分:1)

您可以使用“ of”的Rxjs提供可观察的数据,例如

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在评论中所说的那样,

更新,在这种情况下,请不要使用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”必须是一个对象。如果要返回其他可观察到的值,则“ switchMap”是util的-这是因为在swithmap中必须返回可观察到的值-