angular ng 如果有异步数据？

Question

在我的 Angular navbar 中，我有一个 *ngIf 用于显示或不显示登录/注销按钮

*ngIf="!authService.loggedIn()

它使用带有返回 true 或 false 的登录函数的服务

  loggedIn() {
    return this.http.get('http://localhost:3000/users/validateToken')
      .map(res => res.json()).map(data => data.success);
  }

bu 这是异步的，我如何让我的 ngIf 等待它？或者我怎样才能以不同的方式获得相同的结果？

Answer 1

在模板中运行函数是一种不好的做法。您可以拥有一个与用户状态相对应的变量，并将 data.success 存储在那里。将您的异步函数调用到 ngOnInit 并将结果分配给变量。

ngOnInit() {
   return this.http.get('http://localhost:3000/users/validateToken')
      .map(res => res.json()).subscribe(data => this.isLoggedIn = data.success);
}

模板就像

*ngIf="isLoggedIn"

等待异步函数的响应怎么样，你不需要担心，如果结果会到来并分配给变量——DI机制会检测到变化并更新模板

建议 正如我从 res.json() 猜测的那样，您使用的不是 HttpClient，而是 Http已弃用。使用 HttpClient 和 HttpClientModule。