如何处理异步请求并正确显示数据

Question

我的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)
        )
      }
    }
  )
}

但是问题是，当我登录网站时，newMessageNum为0，即使我有几条新消息，徽章也被隐藏，刷新页面后，徽章就出来了。我认为这与异步请求有关。我是新来的。感谢您的帮助！

Answer 1

问题是由于从服务器获取响应后，Angular无法正确更新组件。因此，您必须调用更改检测，使用ngZone或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)
       )
     }
   });
}