angular ng 如果有异步数据？

Question

在我的 angular navbar 我有一个 *ngIf 是否应该显示 login/logout 按钮

*ngIf="!authService.loggedIn()

它使用具有此登录功能的服务 returns true or false

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

但是这是异步的，我如何让 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"

等待async函数的响应呢，你不用担心，如果结果会到来并赋值给变量——DI机制会检测到变化并更新模板

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

Answer 2

您可以使用 async 管道，因为如果请求 returns 一个可观察对象。

*ngIf="!authService.loggedIn() | async"

Answer 3

好像

*ngIf="asyncfn() | async"

只会导致无限循环，但是：

constructor() {
  this.result = this.asyncFn();
}
public asyncFn() { // ... }

模板：

*ngIf="result | async"

工作正常...可爱 Angular...您怎么会推迟它然后只在需要时才完成？ Angular 团队讨厌承诺吗？

angular ng 如果有异步数据？

angular ng if with async data?

typescript

angular-services

angular-ng-if

angular