Question

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

身份验证服务

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中的数据实际更新设置初始订阅。您预订接收数据可确保您的应用程序接收您的数据，但是您的应用程序组件不知道数据已异步更新。因此，您需要单独的订阅才能更新您的数据/视图。

执行以下操作：

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来创建可以订阅的主题。

Answer 2

您的代码没有任何问题，但是从后端服务请求当前用户仅发生一次，除非重新请求，否则不会更新。

如果ApiService正在存储当前用户，则应观察到该用户可以更新：

user: new BehaviorSubject<User>();

如果用户登录或注销，则在ApiService中登录

：

login() {
  // omitted code that obtains user data in response
  // ...
  this.user.next(response.data);
}

logout() {
  this.user.next(null);
}

最好使管道异步，并让Angular为您处理订阅：

<p *ngIf="apiService.user | async as user">{{ user.name }}</p>

确保将apiService注入为 public

constructor(public apiService: ApiService) {}

Angular 5更新视图

2 个答案: