代码之家 › 专栏 › 技术社区 › Nickso

Angular CRUD Delete需要一个位于GetAll中定义的子目录中的子目录

json-server angular11 typescript angular

0

Nickso · 技术社区 · 5 年前

我正在尝试使用json服务器和Angular材质制作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() 方法,这是它唯一的工作方式,但这似乎是多余的 traerPagos() 已经订阅了。

我读到的其他文章: https://www.c-sharpcorner.com/article/angular-11-curd-application-using-web-api-with-material-design/ )

2 回复 | 直到 5 年前

1

Gian Marco Te 5 年前

您的“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);
    });
  }

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

2

0

bjlasc01 5 年前

试着在里面用开关地图。这将通过在Rxjs中取消订阅然后在引擎盖下重新订阅来管理您的内部订阅。

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

}