在Angular 5中更新数据库后刷新组件

Question

我有一个包含路由/ home的父组件,其中包含一个列表,当单击列表项时,我导航到/ home/edit/listid并更新数据库.数据库更新后,我将导航回/ home.但是在我手动刷新页面之前,列表不会更新.我也尝试在更新数据库后调用dataservice.getList(),但没有运气.以下是我的代码.有人可以帮我识别我错过的东西吗？

家庭组件

ngOnInit() {
    this.loadList();
  }
  loadList() {
    this.dataservice.getList().subscribe(
      res => {
        this.List= res;
      },
      err => {
        console.log('Error Occoured');
        console.log(err);
      }
    );
  }

DataService getList()

getList(): Observable<any[]> {
    return this.http.post<any[]>('https://resturl/Prod/getdata', {
      'operation': 'getData'
      }
    });
  }

编辑列表

this.dataservice.updateList().subscribe(
        updateAccRes => {
            this.dataservice.getList();
            this.router.navigate(['/home']);
          }
        },
        error2 => {
          console.log(error2);
        }
      );

Answer 1

您可以添加一个保存项目列表的服务，并且在您的编辑列表组件中，您将更新服务中的项目。这样，您将在主组件和编辑列表组件中拥有相同的项目。

例子：

class ItemsService{ 
   list: Items[]; 

   getItemById(index){
       return list[index];
   } 
   updateItemById(item, index){
       this.list[index] = item;
   }
}


class EditListComponent{
   item:Item;
   index:number;
   ...
   this.item = this.itemsService.getItemById(index);

   updateBtnClick(){
         this.itemsService.updateItemById(item, index);
   }
}