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

时间:2018-07-15 01:07:21

标签: javascript node.js angular typescript asynchronous

我的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,即使我有几条新消息,徽章也被隐藏,刷新页面后,徽章就出来了。我认为这与异步请求有关。我是新来的。感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

问题是由于从服务器获取响应后,Angular无法正确更新组件。因此,您必须调用更改检测,使用ngZoneChangeDetectorRef

示例:

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