同一组件中不同视图中的两个 rxjs .pipe() 方法给出了相同的结果，尽管在 Angular 的服务文件中使用了两

Question

stackblitz.com/edit/angular-kendo-2grid 检查一下。如果我单击下一个网格，它应该调用新的 api 并显示数据，但它也会更改以前的数据

我的单个组件中有两种不同的方法，它们使用 .pipe（） 方法，并在服务文件中引用两种不同的方法。 这意味着他们打算给出不同的结果，但给出相同的结果。

我

有一个很好的视图，我正在单击其中一个列表时实现一个新视图。我得到的新结果很好，但存在结果也更新为新的结果。

在我的服务文件中：

methodOne(){
  return this.http
      .get(`https://jsonplaceholder.typicode.com/posts`, this.httpOptions)
       .pipe(
        map(
          res => {
            if (!res) {
              return res = '';
            } else {
              return res
            }
          }
        )
      )
      .pipe(
        tap(data => {
          this.data = data
        })
      )
      .subscribe(data => {
        super.next(data);
      });
  }
}

初始第一种方法有效，低于第二种方法

也有效，但是当第二种方法有效时，它也会更改第一个视图的结果

methodTwo(){
  return this.http
      .get(`https://jsonplaceholder.typicode.com/newposts`, this.httpOptions)
       .pipe(
        map(
          res => {
            if (!res) {
              return res = '';
            } else {
              return res
            }
          }
        )
      )
      .pipe(
        tap(data => {
          this.data = data;
        })
      )
      .subscribe(data => {
        super.next(data);
      });
  }
}

在我的组件文件中：

comOne(value){
this.editService.methodOne(value);
    this.view = this.editService.pipe(map(
      data => process(data, this.gridState)
));
}
comTwo(value){
this.editService.methodTwo(value);
    this.view2 = this.editService.pipe(map(
      data => process(data, this.gridState)
));
}

两者都有效，但是当我调用 comTwo（值） 时，它也改变了 this.view 结果，我想保留这个.view 结果

Answer 1

您通过"this.data"在编辑服务上引用相同的变量

  public read2(id) {
    this.tempId = id;
    if (this.data.length) {
    //this.data was already initialized during your .read() initialization
    //therefore if(this.data.length) will always be true
    //if you really want to maintain this data structure in your servicem
    //create a differnt property that holds the 2nd data. e.g. "this.data2"
      return super.next(this.data);
    }

    this.fetch2()
      .pipe(
        tap(data => {
          this.data = data;
        })
      )
      .subscribe(data => {
        super.next([data]);
      });
  }

下面是一个真正令人头疼的问题，fetch 发出一个正确的数组，但是 fetch2 发出一个对象，但您希望它被加载到你的网格上

  private fetch(action: string = '', data?: any): Observable<any[]> {
    return this.http
      .get(`https://jsonplaceholder.typicode.com/posts`)
      .pipe(map(res => <any[]>res));
  }
  private fetch2(action: string = '', data?: any): Observable<any[]> {
    return this.http
      .get(`https://jsonplaceholder.typicode.com/posts/${this.tempId}`)
      .pipe(map(res => <any[]>res));
  }

所以把这条线放在你的ngOninit上

this.view = this.editService.pipe(map(data => process(data, this.gridState)),filter(d=>d.total>0),take(1));

然后在您的服务上编辑您的 read2

public read2(id) {
    this.tempId = id;
    this.data = [];
    if (this.data.length) {
      return super.next(this.data);
    }

    this.fetch2()
      .pipe(
        tap(data => {
          this.data = data;
        })
      )
      .subscribe(data => {
        //super.next(data); remove this line
        super.next([data]);
      });
  }