时间戳

首页 > 解决方案 > Angular CRUD Delete 需要在 GetAll 中定义的 Suscribe 中进行订阅

angular - Angular CRUD Delete 需要在 GetAll 中定义的 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);
    });
  }

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

我尝试了什么：我在 subscribe insideborrarPago()方法中放置了一个订阅，这是它唯一的工作方式，但这似乎是多余的，因为traerPagos()已经订阅了。

我读到的其他文章：还有其他方法可以实现吗？我也在关注这篇文章，但是这个人使用的是相同的逻辑，在 delete 方法中，他在没有另一个订阅的情况下调用了 getAll 方法（https://www.c-sharpcorner.com/article/angular-11-curd-应用程序-使用-web-api-with-material-design/ )

标签： angulartypescriptangular11json-server

解决方案

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

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

推荐阅读