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

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

编辑列表 您只需要在此处更新项目。应该在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 您可以在此处检查更新列表的存在。如果存在，请显示它。如果它不存在，请显示“loading ....”消息。

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

Answer 2

您可以添加包含项目列表的服务，在您的edit-list-component中，您将更新服务中的项目。这样，您将在主组件和编辑列表组件中拥有相同的项目。

示例：

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

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

2 个答案: