угловой нг если с асинхронными данными?

Question

В моем угловом значении navbar У меня есть *ngIf, скорее всего, кнопка входа / выхода должна отображать

*ngIf="!authService.loggedIn()

, она использует сервис с этой функцией loggedIn, который возвращает true или false

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

но это асинхронно, как я могу заставить ngIf его ждать?или как по-другому получить тот же результат?

Answer 1

Вы можете использовать канал async, поскольку, если запрос возвращает наблюдаемое.

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

Answer 2

Запуск функции в шаблоне - плохая практика.Вы можете иметь переменную, соответствующую статусу пользователя, и хранить там 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.