Угловые нг, если с асинхронными данными?

Question

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

*ngIf="!authService.loggedIn()

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

  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

Вы можете использовать angularJS $timeout , чтобы заставить Angular распознавать функцию, вызываемую из async.

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

Число 50 немного произвольно. Это просто часть функции $timeout.

Answer 4

Похоже на

      *ngIf="asyncfn() | async"

Однако приводит только к бесконечному циклу:

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

шаблон:

      *ngIf="result | async"

отлично работает... прекрасный Angular... как, черт возьми, вы могли бы отложить это, чтобы делать это только тогда, когда это необходимо? Команда Angular ненавидит обещания?