два метода rxjs .pipe () в разных представлениях в одном и том же компоненте дают один и тот же результат, хотя в угловом файле используются два разных метода

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, я хочу сохранить результат this.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]);
      });
  }

и ниже - настоящая головная боль, выборка выдает массив, который является правильным, выборка 2 выдает единственный объект, но выожидаем, что он будет загружен в вашу сетку

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