angular - 如何在不刷新页面的情况下更新视图中显示的数据?
问题描述
我有一个用例,用户可以在其中收藏一个项目。下面的代码显示了我如何从数据库中检索数据以显示在视图中。
最喜欢的服务
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();
}
}
}
收藏夹.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() 中,但页面没有更新。
解决方案
我建议你使用Observable
over a promise
。这将帮助您在不重新加载的情况下获取数据。
推荐阅读
- javascript - 如何在 React Router 4/5 中有条件地渲染包装组件
- c - 获取“取消引用指向不完整类型'结构节点'的指针”错误
- java - Selenium java:如何知道 WebElement 指向哪个 DOM 元素?
- devexpress - 如何在不接触其他任何东西的情况下连续输入条形码?
- ubuntu - sh sed 替换问题
- git - 如何在 AWS Code Commit 中限制拉取请求批准
- ocaml - OCAML 模块包含无法泛化的类型变量
- python - 如何在 openai-gym 环境中使用“离散”对象?
- python - 如何将两个正则表达式与中间的“填充”合并?
- jvm - JVM 是独立于它所安装的物理机器运行,还是与它一起工作?