Почему не обновляется мой компонент?

Question

Я реализовал наблюдаемую для извлечения контактов в компоненте. Как это работает, я настроил httpService, чья чистая функция создает и возвращает HTTP-вызов следующим образом:

httpService.ts

getContactsHttp(params: any) {
     let headers: any = new HttpHeaders(this.authService.getHeadersClient());
     return this.httpClient.get<ContactSearch[]>('/contacts', {headers: headers, params: params});
    }

Затем у меня есть служба контактов, которая делает реальные звонки и сохраняет ответ в заметном contacts$. Причина, по которой я не делаю этого в компоненте, заключается в том, что у меня будет несколько компонентов, обращающихся к наблюдаемой contacts$.

contactService.ts

contacts$: Observable<ContactSearch[]>;
getContacts$(params: any) {
    this.contacts$ = this.httpService.getContactsHttp(params);
    this.contacts$.subscribe();    
  }

Вмой основной компонент я связываю компонент contacts$ с contactService в конструкторе. Я тогда звоню getContacts на ngOnInit.

component.ts

contacts$: Observable<ContactSearch[]>;
constructor(contactService:ContactService){
  this.contacts$ = this.contactService.contacts$;
}

ngOnInit() {
  this.fetch();
}
fetch() {
  let params: any = null;
  this.contactService.getContacts$(params);
}

component.html

<div *ngIf="contacts$ | async">
  Content Fetched!
</div> 

Когда я загружаю компонент, он выполняетвыборка, но contacts$ не обновляется, и представление не изменяется. Я знаю, что вызов API работает правильно, так как у меня активен перехватчик HTTP, и я вижу, что он вызывает HTTP-клиент. Так должно быть, как я объявляю contacts$ в конструкторе.

Что я делаю не так?

Answer 1

вы присваиваете contacts$ в constructor компонента, но извлекаете список в ngOnInit, ngOnInit работает после constructor, поэтому я думаю, что это причина, по которой вы не видите измененийпоэтому присвойте contacts$ внутри ngOnInit, потому что для него лучше, чем constructor, и делайте это везде, потому что не рекомендуется делать такие вещи внутри constructor.

ngOnInit() {
  this.fetch();
  this.contacts$ = this.contactService.contacts$;
}

другое дело, чтобы не отправлять http-запрос каждый раз, когда вы звоните getContacts$, вы можете использовать оператор shareReplay из rxjs, чтобы обмениваться данными, только отправляя http-запрос один раз

getContacts$(params: any) {
    this.contacts$ = this.httpService.getContactsHttp(params).pipe(shareReplay(1));
    this.contacts$.subscribe();    
}