CODEWITHSUNDEEP
angularobservable
Blue Moon
Blue Moon

Reputation: 431

How do I force two observable to execute in my desired order in angular?

In my angular application I used 2 observable one for edit data and the other one for select all data.

here is my pieces of codes:

Main piece that I want to observers execute in my desired order

  dialogRef.afterClosed().subscribe(result => {
    this.mpchange._id = result.id;
    this.mpchange.measureTitle = result.title;
    this.mpchange.measureDescription = result.description;
    this.mpchange.measureSymbol = result.symbol;
    this.mpserv.editbyid(result.id, this.mpchange).subscribe( // <<-- first observer
      x => console.log(x),
      err => console.log(err),
      () => console.log('Complete')
    );
    this.refresh(); // <<-- second observer
  });

first observer calls a method that edits my database document and second one select all data from my database. In fact my goal is to show the user edited data but it doesn't work properly. When it executes at most second observer executes earlier than first and sometimes first is earlier then second.

In back end console I received these lines :

GET /mea/getall 200 3.170 ms - 615
PUT /mea/editbyid/5ce937907d656012902702cb 200 213.014 ms - 28

It shows that second method executes earlier.

Even I tried to place this.refresh() within subscribe like this :

  dialogRef.afterClosed().subscribe(result => {
    this.mpchange._id = result.id;
    this.mpchange.measureTitle = result.title;
    this.mpchange.measureDescription = result.description;
    this.mpchange.measureSymbol = result.symbol;
    this.mpserv.editbyid(result.id, this.mpchange).subscribe( // <<-- first observer
      x => {
            console.log(x);
            this.refresh(); // <<-- second observer placed here
      },
      err => console.log(err),
      () => console.log('Complete')
    );
  });

But result was the same.

refresh() method is here:

private refresh() {
  this.mpserv.getall().subscribe(
    x => {
      this.mp = [];
      x.forEach(elementj => {
        this.mp.push(elementj);
      });
      this.filltoelements(this.mp);
      this.dataSource = new MatTableDataSource<MeasureTypeElemetns>(this.ELEMENT_DATA);
      this.changeDetectorRefs.detectChanges();
    },
    err => console.error('Observer got an error: ' + err),
    () => console.log('Observer got a complete notification')
  );
}

Here is my edit method:

private editone() {
  this.mpserv.editbyid(this.mpchange._id, this.mpchange).subscribe(
    x => console.log(x),
    err => console.log(err),
    () => console.log('Complete')
  );
}

I even used forkJoin operator like this:

forkJoin(
  [
  this.mpserv.editbyid(this.mpchange._id, this.mpchange).subscribe(
    x => console.log(x),
    err => console.log(err),
    () => console.log('Editing Completed')
  ),

  this.mpserv.getall().subscribe(
    x => {
      this.mp = [];
      x.forEach(elementj => {
        this.mp.push(elementj);
      });
      this.filltoelements(this.mp);
      this.dataSource = new MatTableDataSource<MeasureTypeElemetns>(this.ELEMENT_DATA);
      this.changeDetectorRefs.detectChanges();
    },
    err => console.error('Refresh got an error: ' + err),
    () => console.log('Refresh completed')
  )
  ]
);

but It doesn't work properly.

Do you have any idea?

Upvotes: 0

Views: 153

Answers (1)

Blue Moon
Blue Moon

Reputation: 431

I used concatall() method. So it worked properly.

const streamOne = this.mpserv
  .deleteonebyid(obj.id)
  .pipe(
     finalize(() => console.log('1-deleted one document.'))
  );
const streamTwo = this.true_clearElements();
const streamThree = this.true_refresh();
const streamFour = this.pginator_change();
const source = of(streamOne, streamTwo, streamThree, streamFour);
source.pipe(concatAll()).subscribe();

Upvotes: 1

Related Questions