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

Question

i have a function that filters a list on add and delete and calls the respective api and binds to the async observable contact$

below is my

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));

      }
    });

   
  }

service file

  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 }]);
      })
      );
  }

issue is i am only able to either save or only delete.. if both calls are made , only save is done and not delete. how do i make sure delete is completed before the save is called ? What am i doing mistake here?

Answer 1

Have one variable and setting both calls to that this.contact$ . So the second forEach loop is overriding the value from the previous loop. If you want to use async for this, you will need some refactoring.

Can use forkJoin or combineLatest depending on how your service is set up. see below.

  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$ = combineLatest(obsArray$);
  }