0

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(value) 时，它也会更改 this.view 结果，我想保留 this.view 结果

4

1 回答 1

0

您通过“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]);
      });
  }
于 2019-01-17T23:22:04.973 回答