如何强制两个可观察对象按所需的顺序以角度执行?

时间:2019-06-09 09:21:29

标签: angular observable

在我的有角度的应用程序中,我使用了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')
  )
  ]
);

但是它不能正常工作。

你有什么主意吗?

1 个答案:

答案 0 :(得分: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();