Наблюдаемое добавление данных снова и снова о заполнении действий

Question

У меня есть Mat-Table, которая дублирует данные, когда пользователь нажимает кнопку, чтобы заполнить таблицу.

Теперь API корректен, и у меня есть другие таблицы, которые работают просто отлично.

Единственное предостережение с этой таблицей состоит в том, что в этой таблице есть кликабельные подробные строки.

Таким образом, цель здесь - вернуть 2 строки для каждой входящей строки.Строка 1 для заполнения таблицы и строка 2 в качестве строки сведений о том, когда пользователь щелкает строку таблицы.(В первый раз, когда пользователь щелкает, заполняет все в порядке)

Я вижу следующее: данные из API возвращают 5 строк.(что правильно), и источник данных из метода connect должен затем вернуть массив 10. Назад.

Однако, если я снова нажму кнопку заполнения, таблица отобразит 20 строк, затем 30, а затем 40 при последующих щелчках.

Я подумал, что, возможно, массив строк не будет сброшен, но я установил длину в 0 и все еще имею проблему.

Я считаю, что проблема заключается в этом методе.

connect(collectionViewer: CollectionViewer): Observable<Gizmos[]> {
    this.rows.length = 0;

    return this.Gizmosubject.asObservable()
      .pipe(
      map(x => {
        //alert("Length going in: " + x.length);   -- I always have the correct count 
        x.forEach(gizmo =>
          this.rows.push(gizmo, { detailRow: true, gizmo }));
          //alert("Rows: " + this.rows.length);    -- I notice here where rows keeps growing. (As the user clicks the action)
        console.log(this.rows);
          return this.rows;
        })
      );
  }

Answer 1

Проблема в том, что вы сбрасываете его при вызове функции connect.Но rows заполняется только внутри map().Следовательно, после того, как вы начинаете слушать ваш Gizmosubject, он никогда не сбрасывается в 0. Эта функция похожа на обратный вызов, который имеет свою собственную область действия и является асинхронным, на него не влияет this.rows.length = 0; в начале функции connect.

Answer 2

Если вы хотите, чтобы каждые 5 записей возвращали массив из 10 записей (а не кумулятивный результат), вы не всегда должны вводить this.rows, или вы можете сбросить this.rows перед его заполнением.Попробуйте что-то вроде этого:

connect(collectionViewer: CollectionViewer): Observable<Gizmos[]> {

 return this.Gizmosubject.asObservable()
  .pipe(
  map(x => {
    //alert("Length going in: " + x.length);   -- I always have the correct count 
    this.rows = [];   // <== Notice this line which will reset rows
    x.forEach(gizmo =>
      this.rows.push(gizmo, { detailRow: true, gizmo }));
      //alert("Rows: " + this.rows.length);    -- I notice here where rows keeps growing. (As the user clicks the action)
    console.log(this.rows);
      return this.rows;
    })
  );
}