Виртуальная прокрутка Primeng p-table отображает предыдущие строки при использовании группировки строк

Я пытаюсь создать p-table, в котором сгруппированы строки, но я не могу правильно применить функцию виртуальной прокрутки.

p-table является частью структуры PrimeNg.

Проблема заключается в том, что при прокрутке и выполнении ленивой загрузки (которая на самом деле просто добавляет несколько строк) в таблице отображаются предыдущие строки вместо новых. Но если я загружаю все свои данные и прокручиваю от начала до конца, все строки отображаются правильно. Я предполагаю, что это проблема при обновлении таблицы после отложенной загрузки.

Для лучшего понимания этой проблемы я воспроизвел ее на stackblitz: https://stackblitz.com/edit/angular6-primeng-8mtvwc

Спасибо за любую помощь.


angular primeng primeng-turbotable virtualscroll
person MHogge    schedule 23.08.2019    source источник
comment
Я не уверен, вижу ли я проблему в прикрепленном вами стеке. Вы уверены, что это правильный?   -  person Dipen Shah    schedule 26.08.2019
comment
Я записал проблему, воспроизведенную на stackblitz: gofile.io/?c=GYNJhF   -  person MHogge    schedule 27.08.2019
comment
Вы пытались добавить хвост к имени, это может быть фейкер с тем же именем. Попробуйте const acpName = faker.company.companyName (0) + faker.random.number ({min: 1, max: 10}); или что-то вроде того   -  person Pablo Palacios    schedule 30.08.2019

Ответы (2)


arrow_upward
2
arrow_downward

1) При группировке установлен неверный totalRecords. Мы должны взять количество строк заголовка и также добавить его к totalRecords:

this.totalRecords = this.filteredInvoices.length + Object.keys(this.rowGroupMetadata).length;

2) Нарезка всегда с самого начала для меня не имеет смысла. Мы должны только помещать в таблицу новые строки. Так что вместо:

  loadChunk(init?: boolean) {
   ...
      data = [...this.filteredInvoices]
    } else {
      data = this.filteredInvoices.slice(0, endIndex); // <===
    }
    ..
  }

вы можете сделать что-то вроде этого:

  loadChunk(init?: boolean) {
    ...
    const startAt = this.displayedInvoices ? this.displayedInvoices.length : 0;
    let endAt = startAt + this.MAX_ROWS;

    if (endAt >= this.filteredInvoices.length) {
      endAt = this.filteredInvoices.length;
    }

    const newInvoices = this.filteredInvoices.slice(startAt, endAt);

    this.displayedInvoices.push(...newInvoices);
  }

Обновил ваш blizz, надеюсь, это поможет: https://stackblitz.com/edit/angular6-primeng-psbm78?file=src/app/home-encoding/home-encoding.component.ts

Ура Крис

person ChrisY    schedule 31.08.2019
comment
Спасибо. Фактически это решает проблему, но до сих пор происходит что-то странное. Если я прокручиваю для загрузки фрагмента, а затем выполняю поиск, размер таблицы не изменяется в соответствии с фактическим количеством строк. Вы можете увидеть это в этом видео: gofile.io/?c=RhkPIm - person MHogge; 04.09.2019

arrow_upward
0
arrow_downward

Я думаю, проблема в том, что PrimeNg внутренне использует высоту строки для виртуальной прокрутки, что всегда вызывает проблемы, например, когда строки имеют разную высоту. Поскольку ваши строки сгруппированы, у вас, вероятно, есть строка заголовка группы, которая также пинает расчет в задницу.

person MoxxiManagarm    schedule 29.08.2019