Angular CRUD 删除需要在 GetAll 中定义的订阅内订阅

Question

我正在尝试使用 json-server 和 Angular Material 进行 CRUD，所以我有我的服务：

服务

  borrarPago(id: Number):Observable<void> {
    return this.http.delete<void>('api/pagos/'+id)
  }

  traerPagos():Observable<Pago[]>{   
    return this.http.get<Pago[]>('api/pagos');
  }

这是我的组件使用我的服务：

  refrescar(data:Pago[]) {
    this.listaPagos = data;
    this.dataSource = new MatTableDataSource<Pago>(data);
    this.dataSource.paginator = this.paginator
  }

  borrarPago(id:Number):void {
    this._pagoService.borrarPago(id)
    .subscribe(() => {
      this._pagoService.traerPagos()
    });
    
  }

  traerPagos(): void {
    this._pagoService.traerPagos()
    .subscribe(data => {
      this.refrescar(data);
    });
  }

问题： 发生的事情是，当我删除一个项目时，该项目被删除但 material table 没有刷新。

我试过的方法： 我在 borrarPago() 方法中将订阅放在订阅中，这是唯一可行的方法，但这似乎是多余的 traerPagos() 已经订阅了。

其他 article/s 我读到： 还有其他方法吗？我也在关注这篇文章，但是这个人使用的是相同的逻辑，在 delete 方法中他调用了 getAll 方法而没有另一个订阅 (https://www.c-sharpcorner.com/article/angular-11-curd-application-using-web-api-with-material-design/)

Answer 1

您的 'subscribe inside a subscribe' 不工作，因为它没有发射。

 borrarPago(id:Number):void {
    this._pagoService.borrarPago(id)
    .subscribe(() => {
      this._pagoService.traerPagos()
    });
    
  }

  traerPagos(): void {
    this._pagoService.traerPagos()
    .subscribe(data => {
      this.refrescar(data);
    });
  }

在上面的代码中，当您的代码点击 this._pagoService.traerPagos() 时，它并没有调用您的 refrescar 函数。

 borrarPago(id:Number):void {
    this._pagoService.borrarPago(id)
    .subscribe(() => {
// here you should call your COMPONENT's traerPagos() function instead of your SERVICE'S traerPagos() function,
      this.traerPagos()
    });
    
  }

Answer 2

尝试在内部使用 switchMap。这将通过在 Rxjs 中取消订阅然后重新订阅来管理您的内部订阅。

borrarPago(id:Number):void {
this._pagoService.borrarPago(id)
.pipe(switchMap(() => {
   return this._pagoService.traerPagos()
 })
.subscribe(data => {
  this.refrescar(data);
});

}

Angular CRUD 删除需要在 GetAll 中定义的订阅内订阅

Angular CRUD Delete needs a suscribe inside a Suscribe defined in GetAll

angular

typescript

angular11

json-server