删除项目后如何更新 HTML5 表格答案

【问题标题】：How to update an HTML5 table after deleting an item删除项目后如何更新 HTML5 表格
【发布时间】：2018-01-21 04:16:17
【问题描述】：

在 restaurant.component.ts 上

我想从arrayList 中删除一个项目并在删除后更新它。查询正在执行删除操作，但列表未更新。我正在调用 ngOnInit() 方法，但没有任何反应

ngOnInit() {
this.restaurantesService.GetRestaurantes()
.subscribe((restaurantes => {
  this.restaurantes  = restaurantes;
}))

}

 qDeleteRestaurantes(CODIGO: number){
var restaurantes = this.restaurantes;
this.restaurantesService.DeleteRestaurantes(CODIGO)
.subscribe((data) => { if (data.n ==1 ){
  for(let i=0;i<restaurantes.length;i++){
    if(restaurantes[i].CODIGO == CODIGO){
      this.restaurantes.splice(i,1);
      this.ngOnInit();

     }        
  } 
}})

}

【问题讨论】：

你确定你打到了if，所以ngOnInit被再次调用。另外作为评论，不要调用ngOnInit，而是再次调用请求以获取餐厅。另外，如果您想在那之后再次取回餐厅，那您为什么要做splice。 splice 是多余的，因为您要再次获取餐馆。

标签： angular rest api typescript

【解决方案1】：

在你的 restaurant.service 中，声明一个变量，

restaurants: restaurants[];

在您的 qDeleteRestaurant(CODIGO: number) 上，分配

this._restaurantService.restaurants = this.restaurants;

当然，在你的构造函数中，声明

 private _restaurantService: RestaurantService,..

**你需要实现DoCheck，

ngDoCheck(){
  this.restaurants = this._restaurantService.restaurants;
}

这种方法是我在购物车中用来删除、添加、更新的方法。祝你好运。

【讨论】：

您是否尝试过实施 ngDoCheck？祝你有美好的一天。