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$;
}

另一件事，要在每次调用getContacts$时都不发送HTTP请求，可以使用shareReplay的{{1}}运算符共享仅发送一次HTTP请求的数据

rxjs

为什么我的组件无法观察到更新？

1 个答案: