typescript - Angular 5 更新 View

Question

我的 app.component 收到日期，但在用户注销和另一次登录后 - 此数据仍然相同。仅在刷新页面 View 后显示正确的日期。

当数据库中的日期发生变化时，如何更新 View 中的日期？

app.component

ngOnInit() {
    this.getCurrentUser()
  }

getCurrentUser() {
      this.apiService.getCurrentUser().subscribe(
      data => { this.user = data },
      err => console.error(err)
    );   
}

app.component.html

<p>{{user.name}}</p>

api.service

getCurrentUser() {
  return this.http.get<any>(this.path + '/curruser')
}

auth.service

loginUser(loginData) {
    this.http.post<loginUserData>(this.path + '/login', loginData).subscribe(res => {     
      this.saveToken(res.token)
      this.router.navigate(['/'])

    }, error => {
      console.log('error', error)
    })
  }

Answer 1

问题是您没有为 ngOnInit 中的实际数据更新设置初始订阅。您对接收数据的订阅可确保您的应用程序接收您的数据，但您的应用程序组件不知道数据已被异步更新。因此，您需要单独订阅以更新您的数据/ View 。

做这样的事情:

userSubcription: Subscription;

ngOnInit() {
    this.userSubscription = this.userService.dataReceived.subscribe(
    (user) => {
      this.user = user;
    });
    this.getCurrentUser();
}

ngOnDestroy() {
    this.userSubscription.unsubscribe();
}

getCurrentUser() {
      this.apiService.getCurrentUser().subscribe(
      data => this.userService.dataReceived.next(data),
      err => console.error(err)
    );   
}

您需要一个额外的 userService 来创建您可以订阅的 Subject。