异步可观察到两个不同的 api 调用 -Angular 8

Question

我有一个函数可以在添加和删除时过滤列表并调用相应的 api 并绑定到异步可观察联系人 $

下面是我的

html

<ng-container *ngIf="contact$ | async as data; else loader">
</ng-container>

ts file

 userChanges(contactList: any[]) {

    let contactsToDel: { pubType: string, masterOutlineId: number, idsv: number, idVariant: number, fn: string, ln: string, cid: string, role: string }[] = [];
    contactList.filter(c => c.mode == 'delete').forEach(contact => {
      if (contact.masterOutlineId === this.masterOutlineId && contact.idVariant === this.idVariant && contact.procuid === this.procuid) {
    
        let idsv = this.idSVList.find(x => x.idv === contact.idVariant).idsv;
        this.idSV = idsv;
        contactsToDel.push({ pubType: this.pubType, masterOutlineId: contact.masterOutlineId, idsv: idsv, idVariant: contact.idVariant, fn: contact.fn, ln: contact.ln, cid: contact.cid, role: contact.role })
        this.contact$ = this.contactService.removeBulkContact(this.pubType, this.procuid, this.variantid, idsv, contactsToDel.filter(c => c.masterOutlineId === this.masterOutlineId && c.idVariant === this.idVariant && contact.procuid === this.procuid));

      }
    });
    let contactsToAdd: { pubType: string, masterOutlineId: number, idsv: number, idVariant: number, fn: string, ln: string, cid: string, role: string }[] = [];
    contactList.filter(c => c.mode == 'add').forEach(contact => {
      if (contact.masterOutlineId === this.masterOutlineId && contact.idVariant === this.idVariant && contact.procuid === this.procuid) {

        let idsv = this.idSVList.find(x => x.idv === contact.idVariant).idsv;
        this.idSV = idsv;
        contactsToAdd.push({ pubType: this.pubType, masterOutlineId: contact.masterOutlineId, idsv: idsv, idVariant: contact.idVariant, fn: contact.fn, ln: contact.ln, cid: contact.cid, role: contact.role })
        this.contact$ = this.contactService.saveContact(this.pubType, this.procuid, this.variantid, idsv, contactsToAdd.filter(c => c.masterOutlineId === this.masterOutlineId && c.idVariant === this.idVariant && contact.procuid === this.procuid));

      }
    });

   
  }

服务文件

  saveContact(pubType: any, procuid: number, variantid: number, idsv: number, contactsToAdd: any): Observable<any> {
    const body = JSON.stringify({ searchType: 'save-contact', pubType: pubType, procuid: procuid, variantid: variantid, idsv: idsv, contactsToAdd });
    console.log("body:",body);
    const endpoint = environment.endpointContacts;
    return this.http
      .post<any>(endpoint, body)
      .pipe(map(data => { return data[0] }), catchError((error) => {
        return of([{ contacts: [], proclist: [], status: error, isError: true }]);
      })
      );
  }

  removeBulkContact(pubType: any, procuid: number, variantid: number, idsv: number, contactsToDelete: any): Observable<any> {
    const body = JSON.stringify({ searchType: 'contact-remove', pubType: pubType, procuid: procuid, variantid: variantid, idsv: idsv, contactsToDelete });
    console.log("body:",body);
    const endpoint = environment.endpointContacts;
    return this.http
      .post<any>(endpoint, body)
      .pipe(map(data => { return data[0] }), catchError((error) => {
        return of([{ contacts: [], proclist: [], status: error, isError: true }]);
      })
      );
  }

问题是我只能保存或只能删除.. 如果两个调用都进行了，则只能保存而不能删除。我如何确保在调用保存之前完成删除？我在这里做错了什么？

Answer 1

有一个变量并将两个调用设置为该变量this.contact$。所以第二个 forEach 循环覆盖了前一个循环的值。如果你想为此使用异步，你将需要一些重构。

  userChanges(contactList: any[]) {
     
    const obsArray$ = [];

    let contactsToDel: { pubType: string, masterOutlineId: number, idsv: number, idVariant: number, fn: string, ln: string, cid: string, role: string }[] = [];
    contactList.filter(c => c.mode == 'delete').forEach(contact => {
      if (contact.masterOutlineId === this.masterOutlineId && contact.idVariant === this.idVariant && contact.procuid === this.procuid) {
    
        let idsv = this.idSVList.find(x => x.idv === contact.idVariant).idsv;
        this.idSV = idsv;
        contactsToDel.push({ pubType: this.pubType, masterOutlineId: contact.masterOutlineId, idsv: idsv, idVariant: contact.idVariant, fn: contact.fn, ln: contact.ln, cid: contact.cid, role: contact.role })
        const obs$ = this.contactService.removeBulkContact(this.pubType, this.procuid, this.variantid, idsv, contactsToDel.filter(c => c.masterOutlineId === this.masterOutlineId && c.idVariant === this.idVariant && contact.procuid === this.procuid));
        obsArray$.push(obs$);
      }
    });
    let contactsToAdd: { pubType: string, masterOutlineId: number, idsv: number, idVariant: number, fn: string, ln: string, cid: string, role: string }[] = [];
    contactList.filter(c => c.mode == 'add').forEach(contact => {
      if (contact.masterOutlineId === this.masterOutlineId && contact.idVariant === this.idVariant && contact.procuid === this.procuid) {

        let idsv = this.idSVList.find(x => x.idv === contact.idVariant).idsv;
        this.idSV = idsv;
        contactsToAdd.push({ pubType: this.pubType, masterOutlineId: contact.masterOutlineId, idsv: idsv, idVariant: contact.idVariant, fn: contact.fn, ln: contact.ln, cid: contact.cid, role: contact.role })
        const obs$ = this.contactService.saveContact(this.pubType, this.procuid, this.variantid, idsv, contactsToAdd.filter(c => c.masterOutlineId === this.masterOutlineId && c.idVariant === this.idVariant && contact.procuid === this.procuid));
        obsArray$.push(obs$);
      }
    });

   this.contacts$ = forkJoin(obsArray$);
  }

异步可观察到两个不同的 api 调用 -Angular 8

async observable for two different api calls -Angular 8

angular

rxjs

angular8

rxjs-observables