Question

我遇到了这个问题，我在调用一个可观察对象，它将从服务器获取列表，然后对列表进行一些映射以将其格式化为所需的UI格式。但是，在完成映射之前，观察者已经完成，因此我找不到列表中存在的值。

下面的代码。

loadContacts(id: number): Observable<boolean> {
    return Observable.create(observer => {
      this.sampleSvc
        .getList(id)
        .subscribe(contacts => {

          this.contactList = contacts.map(item => {
            return {
              id: item.Id,
              item: item.Description
            };
          });

          observer.next(true);
          observer.complete();
        }, error => {

          observer.next(false);
          observer.complete();
        });
    });
}

HandleSave(contactId: number) {
   if (contactId && contactId > 0) {
      this.loadContacts(this.id).subscribe(result => {
        this.selectedContact = this.contactList.find(item => item.id == contactId);
        this.inputForm.get("contact").setValue(this.selectedContact.id);
        this.setTitle(contactId);
      });
    }
}

contactList未更新，因此selectedContact为空。

目前，我对此进行了临时修复。

setTimeout(() => {
          this.producersAgreementForm.get("agreementSigner").setValue(this.selectedAgreementSigner.id);
        }, 200);

Answer 1

根据您的代码，我觉得您尚未发现RxJs operators。您仅应在需要数据的最后（通常在组件视图中）订阅Observables。如果您需要在整个过程中的任何地方转换数据，则只需使用运算符即可进行转换：

import { map } from 'rxjs/operators';

contacts(id: number): Observable<Contact[]> {
  return this.sampleSvc.getList(id).pipe(
    map(contacts => {
      return contacts.map(item => {
        return {
          id: item.Id,
          item: item.Description
        };
      });
    })
  )
}

使用这种方法，您不应再遇到您描述的问题。

等待Array.map完成，然后再完成Observer

1 个答案: