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

【问题标题】：Refresh component after database update in Angular 5在Angular 5中更新数据库后刷新组件
【发布时间】：2018-06-20 21:45:14
【问题描述】：

我有一个带有路由 /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);
      }
    );
  }

数据服务 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);
        }
      );

【问题讨论】：

我看不出这里有什么问题。在路由返回时应该调用ngOnInit（确保调用了getList() 方法）。但我想知道为什么你从你的 API 中获取列表，post
可能您在服务完成之前导航到 /home 并且您没有任何机制来更新父组件。（您的新数据已获取但从未传递给父组件尝试使用 Subject/BehaviorSubject 与 b/w 组件/服务进行通信，并在获取列表后重定向到主页。
这不可能是原因。他不必在编辑列表组件中调用getList()，因为他没有订阅它。所以它什么也没做。当他在updateList 的订阅中路由回到家时（调用完成），他应该路由回到家并且应该在 Home 组件的ngOnInit 中调用getList。他在这里更新列表

标签： angular components refresh

【解决方案1】：

JavaScript 的异步是你的问题。当您导航到主页时，更新列表的响应尚未返回，因此您必须手动重新加载页面。一个解决方案是在服务中有一个公共变量，组件和 *ngIf 都可以访问它，在您的主组件的 HTML 中检查公共变量中的更新。

编辑列表 您只需要在此处更新项目。导航应该在 this.dataservice.getList() 内部调用，以确保它等待 getList() 调用的响应。

this.dataservice.updateList().subscribe(
    updateAccRes => {
        this.dataservice.getList();
      }
    },
    error2 => {
      console.log(error2);
    }
  );

DataService getList() 在此处创建一个公共变量，使用 getList() 的响应对其进行更新，然后导航到 /home

latestList: any;
getList(): Observable<any[]> {
    return this.http.post<any[]>('https://resturl/Prod/getdata', 
        {'operation': 'getData'})
        .subscribe(response => {
             this.latestList = response.list;
             this.router.navigate(['/home']);
        },
        error => {
            console.log(error);
        }
)};

首页组件 现在，更新列表返回后，我们导航到首页，更新列表即可显示，无需手动重新加载页面。

listOfItems: any
constructure(private dataService : DataService){
    // latestList is accessible here because it is a property of DataService
    this.listOfItems = this.dataService.latestList;
};

home.component.html 您可以在此处检查更新列表是否存在。如果存在，请显示它。如果不存在，则显示“正在加载....”消息。

<div class="list" *ngIf="listOfItems"> <!-- Display list here --> </div>
<div *ngIf="!listOfItems"> Loading.......... </div>

【讨论】：

【解决方案2】：

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

例子：

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

【讨论】：