Angular как подписаться на изменения интерфейса?

Когда вы подписываетесь на наблюдаемое, вы подписываетесь на его значение, которое не является наблюдаемым. Когда вы делаете:

this.candidateProfile = data;

По сути, вы сохраняете в профиле кандидата значение, полученное из наблюдаемого. Конечно, у этих данных больше нет функции «подписаться», поскольку они не являются наблюдаемыми.

Вы должны хранить в 'this.candidateProfile' сам наблюдаемый объект, а не значение, которое вы получаете от него. Вот так:

this.candidateProfile = this.http.get(`users/${id}`, httpOptions);

Надеюсь, что я помог вам, хорошего дня!

Это не всегда лучший способ сделать что-то. Вы не должны возвращать наблюдаемое в свой служебный файл. Стандартная практика заключается в том, чтобы возвращать наблюдаемое на самом компоненте.

Что касается обработки ошибок, вы можете сделать это либо в своем сервисе, либо в своем компоненте. В примере, который я привожу ниже, я буду обрабатывать ошибки компонента.

В вашем сервисе вам нужно будет добавить оператор return:

getProfile(id, token) {
  const httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${token}`
    })
  };

  return this.http.get(`users/${id}`, httpOptions);
}

На вашем component.ts вы подписываетесь на него, чтобы вернуть наблюдаемое значение:

this.auth.candidateProfile.subscribe( data => {
  console.info(data)
}, error => {
  // handle error
});

измените свою службу аутентификации, как показано ниже

export class AuthService {
    private _candidateProfile$: BehaviorSubject<CandidateProfile> = new BehaviorSubject(null);

    getProfile(id, token): void {
        const httpOptions = {
            headers: new HttpHeaders({
                'Content-Type': 'application/json',
                'Authorization': `Bearer ${token}`
            })
        };

        this.http.get(`users/${id}`, httpOptions).subscribe(data => {
                this._candidateProfile$.next(data);
            },
            (error) => { console.info(error) },
            () => {
                console.info('got profile', data);
            })
    }

    get candidateProfile$(): Observable<CandidateProfile> {
      return this._candidateProfile$.asObservable();
    }
}

то вы можете использовать следующее:

this.auth.candidateProfile$.subscribe( data => {
console.info(data)
})

Экспликация

Цель состоит в том, чтобы иметь внутреннюю наблюдаемую на этом сервисе, которая будет транслировать ваш текущий профиль кандидата.

В любом месте вашего приложения вы можете подписаться на него и получить последний выбранный профиль без повторного запуска метода getProfile (и запроса ajax под капотом).

чтобы упростить потребление из AuthService, я создал магический геттер, чтобы абстрагировать его.

get candidateProfile$(): Observable<CandidateProfile> {
  return this._candidateProfile$.asObservable();
}

возьмите свой BehaviorSubject и превратите его в простой Observable. В противном случае вы позволите AuthService потребителю перейти к вашему Observable, а это не то, что ожидается.

единственный способ транслировать новые CandidateProfile должен быть здесь:

 this.http.get(`users/${id}`, httpOptions).subscribe(data => {
      this._candidateProfile$.next(data);
 });

Я также рекомендую вам изменить свой getProfile, как показано ниже

getProfile(id, token): Observable<CandidateProfile> {
    // [...]
    this.http.get(`users/${id}`, httpOptions).subscribe(data => {
           this._candidateProfile$.next(data);
        },
        // [...]
    );

    return this.candidateProfile$;
}

Таким образом, вы можете использовать свой класс следующим образом:

// Fetch new profile.
this.auth.getProfile(id, token).subscribe();
// Fetch last requested profile.
this.auth.candidateProfile$.subscribe();