Угловая функция вызывается несколько раз

Question

У меня есть метод компонента, который я вызываю для шаблона.

Например:

export class Component {
  isValid(id): Observable<boolean> {
    return service.isValid(id)
  }
}

<div *ngIf="isValid(1) | async"></div>
<div *ngIf="isValid(2) | async"></div>
<div *ngIf="isValid(3) | async"></div>

Метод isVaild возвращает наблюдаемое. Проблема в том, что в каждом цикле обнаружения изменений Angular вызывает метод isValid, который возвращает новую наблюдаемую.

Каково решение таких ситуаций?

Answer 1

Если подписаться на услугу, вы будете использовать эту логику в функции обратного вызова, вот так

export class Component {
  isValid: boolean;

  isValid(id) {
    service.isValid(id).subscribe(response => {
      this.isValid = response;
    });
  }
}

Тогда в шаблоне вам не нужно вызывать isValid функцию и не нужно использовать | async

<div *ngIf="isValid(1)"></div>
<div *ngIf="isValid(2)"></div>
<div *ngIf="isValid(3)"></div>