Страница Cra sh при перезагрузке с Angular Observable

Question

У меня есть метод в службе, который выглядит так:

public getAnwendungZuClientId(clientId: string, nurBerechtigteAnwendungen: boolean = true): Observable<Anwendung> {
const anwObservable = this.prüfeObNurBerechtigt(nurBerechtigteAnwendungen);

let observableToReturn: Observable<Anwendung>;

observableToReturn = anwObservable
.pipe(
  map((anwendungen: Anwendung[]) => {
      return anwendungen
        .find(anwendung => {
            return anwendung.client_id === clientId
        })
      }
    ),
  first()
);

return observableToReturn;

}

Он возвращает Observable<Anwendung>. В моем компоненте я просто вызываю этот сервисный метод, чтобы сделать его доступным в представлении

getAnwendungByClientId (anwendungId: string): Observable<Anwendung> {
    return this.anwendungService.getAnwendungZuClientId(anwendungId);
  }

и использовать его в представлении с асинхронным c Pipe

{{ (getAnwendungByClientId(anwendung.clientId) | async).name }}

Он работает, если Я перехожу с другой страницы на страницу с компонентом, который включает наблюдаемое. Но если я вызываю маршрут напрямую или перезагружаю, страница вылетает без особой ошибки c. Кто-нибудь знает, где проблема при прямом вызове этого маршрута?

Пейдж Cra sh

Answer 1

Думаю, Angular пытается вызвать getAnwendungByClientId в каждом цикле обнаружения изменений, что, в свою очередь, вызывает новую подписку на Observable, которая, в свою очередь, создает новый цикл обнаружения изменений. Таким образом, вы получите бесконечный l oop, который, вероятно, приведет к сбою вашего браузера.

Попробуйте вызвать getAnwendungByClientId в ngOnInit вашего компонента и сохраните возвращаемый Observable как свойство класса компонента. Затем подпишитесь на это свойство класса в своем шаблоне.

Примерно так:

private obs$: Observable<Anwendung>

ngOnInit() {
  // don't know where `anwendung` comes from but you need it here :)
  this.obs$ = getAnwendungByClientId(anwendung.clientId)
}

В вашем шаблоне

{{ (obs$| async).name }}