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

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