Angular CRUD Delete 需要在 GetAll 中定义的 Suscribe 内进行 suscribe

问题描述

我正在尝试使用 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);
    });
  }

---

问题：发生的情况是，当我删除一个项目时，该项目被删除但材料表没有刷新。

我尝试过的：我在 borrarPago() 方法中的 subscribe 中放入了一个 subscribe，这是它唯一有效的方法，但是这似乎是多余的，因为 traerPagos() 已经订阅了。

我读过的其他文章：还有其他方法可以做到这一点吗？我也在关注这篇文章，但该人使用了相同的逻辑，在删除方法中，他调用了 getAll 方法，而无需其他订阅 (enter image description here)

解决方法

您的“订阅内订阅”不起作用，因为它没有触发。

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

,

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

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

}