Как заставить два наблюдаемых выполнить в желаемом порядке в угловых?

Question

В моем угловом приложении я использовал 2 наблюдаемых, один для редактирования данных, а другой для выбора всех данных.

вот мои кусочки кодов:

Основная часть, которую я хочу, чтобы наблюдателивыполнить в моем желаемом порядке

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

первый наблюдатель вызывает метод, который редактирует документ моей базы данных, а второй выбирает все данные из моей базы данных.На самом деле моя цель - показать данные, отредактированные пользователем, но они не работают должным образом.Когда он выполняет самое большее, второй наблюдатель выполняется раньше, чем первый, а иногда первый - раньше, чем второй.

В серверной консоли я получил следующие строки:

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

Это показывает, что второй метод выполняется раньше.

Даже я пытался поместить this.refresh() в подписку так:

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

Но результат был тот же.

refresh() метод здесь:

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

Вот мой метод редактирования:

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

Я даже использовал оператор forkJoin так:

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

, но он не работает должным образом.

Есть идеи?

Answer 1

Я использовал concatall() метод. Так что все заработало нормально.

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