如何在不刷新页面的情况下更新视图中显示的数据？

Question

我有一个用例，用户可以在其中收藏一个项目。下面的代码显示了如何从数据库中检索数据以显示在视图中。

最喜欢的服务

   async getfavoriteList(): Promise<firebase.firestore.QuerySnapshot> {
    const user: firebase.User = await this.authService.getUser();
    if (user) 
          {
    this.FavoriteListRef = firebase
      .firestore()
      .collection(`userFavorites`);
    return this.FavoriteListRef.where('uid', '==', user.uid).get();
              }
           } 
       }

Favorite.ts

ngOnInit() {    this.favoriteService.getfavoriteList().then(favoriteListSnapshot => {
      this.favoriteList = [];
      favoriteListSnapshot.forEach(snap => {
        this.favoriteList.push({
          id: snap.id,
          favoriteList: snap.data().favourite
        });
        console.log(snap.data().favourite)
        return false;
      });
    }); 

  }

我遇到的问题是，当用户收藏夹某个项目并转到“收藏夹”页面以查看收藏夹的项目时，除非刷新页面，否则视图不会更新。这不是理想的用户体验。如何在不刷新页面的情况下更新视图。我尝试将代码放置在构造函数中以及ngOnInit（）中，但是页面不会更新。

Answer 1

我建议您在Observable上使用promise。这将帮助您获取数据而无需重新加载。

Refer official documentation。