如何解决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);
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。