javascript - 如何处理异步请求并正确显示数据
问题描述
我的 html 页面上有一个徽章组件,用于指示有多少未读消息。html代码:
<button class="font" mat-menu-item routerLink="/message">
<mat-icon>notifications</mat-icon>
<span [matBadgeHidden]="newMessageNum === 0" matBadge={{newMessageNum}} matBadgeOverlap="false" matBadgeColor="warn">Messages</span>
</button>
变量newMessageNum 是通过http 请求到后端获得的。代码:
ngOnInit() {
this.userService.getCurrentUser().subscribe(
res => {
if (res) {
this.currentUser = res;
this.messageService.getNewMessagesNum(this.currentUser.username).subscribe(
res => {
if (res.success) this.newMessageNum = res.number;
},
err => console.log(err)
)
}
}
)
}
解决方案
问题是由于从服务器获得响应后角度未正确更新您的组件。因此,您必须调用更改检测,使用ngZone
or 或ChangeDetectorRef
.
例子:
constructor(private cdr:ChangeDetectorRef){
...
...
}
ngOnInit() {
this.userService.getCurrentUser().subscribe(
res => {
if (res) {
this.currentUser = res;
this.messageService.getNewMessagesNum(this.currentUser.username).subscribe(
res => {
if (res.success) {
this.newMessageNum = res.number;
this.cdr.detectChanges();
}
},
err => console.log(err)
)
}
});
}
推荐阅读
- sql - SQL将一些列名转换为行值,将一个列名行值转换为列名
- r - ggplot 图中不可读的字符 - 在 Linux 上的 Jupyter 中运行 R
- r - 加入 R 中的两个列表,延迟为 1
- c++ - 如何使用 C++ 将人脸识别添加到 winfrom
- azure-devops - ADO 存储库中的合并冲突
- powershell - powershell 向 AWX 调用 rest api
- node.js - 未处理的承诺拒绝。无法连接到服务器
- woocommerce - WP ALL IMPORT 与 foreach
- google-cloud-platform - 如何为 Nvidia A100 申请增加 GPU 配额(适用于 AI Platform - Notebook)
- java - 编译 swagger-codegen java Petstore sdk 时出错