angular ng 如果有异步数据？

Question

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

*ngIf="!authService.loggedIn()

它使用带有此 loggedIn function 的服务返回 true 或 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"

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

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

Answer 2

您可以使用async管道，因为如果请求返回一个可观察的。

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

Answer 3

看起来像

*ngIf="asyncfn() | async"

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

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

模板：

*ngIf="result | async"

工作正常......可爱的Angular......你怎么会把它推迟到只在需要时完成？ Angular 团队讨厌承诺吗？

Answer 4

您可以使用 angularJS $timeout获取 Angular 以识别从异步调用的 function。

$timeout(authService.loggedIn(), 50);

50这个数字有点武断。 它只是 $timeout function 的一部分。