PrimeNG 9 - виртуальная прокрутка таблицы и фильтрация не работают вместе правильно

Я столкнулся с ошибкой, которую я считаю ошибкой, при попытке объединить функциональность виртуальной прокрутки и фильтрации в компоненте таблицы PrimeNG.

При включении обеих функций и попытке фильтрации визуализированные данные не отфильтровываются, но мне удалось выполнить отладку с помощью вызываемых функций фильтра primeng, и я вижу, что базовая часть действительно фильтруется, я подозреваю, что это что-то больше связано с тем, как экземпляр виртуального скроллера CDK каким-то образом используется внутри.

Воспроизводимая демонстрация - https://stackblitz.com/edit/primeng9-table-virtualscroll-with-filtering?file=src/app/app.component.html

Используя приведенный выше URL-адрес, просто отфильтруйте любой из столбцов возвращаемых данных, например торговая марка.

В этой первой демонстрации используется виртуальная прокрутка, а также, пожалуйста, наблюдайте за выводом консоли во время фильтрации, поскольку я фиксирую здесь результаты события таблицы onFilter и подсчитываю длину совпадающих отфильтрованных записей для входного фильтруемого поискового запроса. Вы увидите, как результаты четко сопоставляются и возвращаются, но строки в таблице просто никогда не фильтруются соответствующим образом, всегда отображаются исходные обработанные строки.

Чтобы еще раз доказать мое подозрение, что я думаю, что это так или иначе является ошибкой использования виртуального скроллера CDK в primeNG, вы можете удалить следующие два атрибута таблицы в демонстрации stackblitz:

[virtualScroll]="true" [virtualRowHeight]="34"

после их удаления и отключения виртуальной прокрутки функция фильтрации будет работать, как и ожидалось, с точки зрения отображения только результатов сопоставления в таблице, но, конечно, теряет преимущество в производительности, связанное с включенной виртуальной прокруткой.

Итак, я спрашиваю, как я могу получить и то, и другое здесь?

Кстати - да, я использую PrimeNG 9, а 10 - последняя, ​​но по разным причинам проект, в котором я работаю, все еще находится на 9 и будет работать в течение некоторого времени, поэтому я ищу исправление v9, если возможно, здесь.

Спасибо за ваше время!


person mindparse    schedule 21.12.2015    source источник
comment
Можете ли вы также поместить сюда код stackblitz? См. минимальный воспроизводимый пример. Оставить ссылку можно, но код также должен быть в самом вопросе на случай, если ссылка умрет.   -  person zero298    schedule 18.11.2020


Ответы (1)


После некоторого теста я увидел, что эта проблема связана с используемой вами версией. Как вы сказали, вы не можете обновить версию, но как насчет перехода на более раннюю версию?

    {
      "name": "qgnirxral.github",
      "version": "0.0.0",
      "private": true,
      "dependencies": {
        "@angular/animations": "~9.1.9",
        "@angular/cdk": "~9.2.4",
        "@angular/common": "~9.1.9",
        "@angular/compiler": "~9.1.9",
        "@angular/core": "^9.1.9",
        "@angular/forms": "~9.1.9",
        "@angular/platform-browser": "~9.1.9",
        "@angular/platform-browser-dynamic": "~9.1.9",
        "@angular/router": "~9.1.9",
        "@fullcalendar/core": "4.4.0",
        "@types/jasmine": "3.3.10",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "^12.11.1",
        "primeflex": "^1.1.1",
        "primeicons": "^2.0.0",
        "primeng": "9.0.6",
        "quill": "^1.3.7",
        "rxjs": "^6.6.3",
        "rxjs-compat": "^6.6.3",
        "tslib": "^1.13.0",
        "web-animations-js": "2.3.2",
        "zone.js": "0.10.2"
      },
      "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      },
      "devDependencies": {
        "@angular-devkit/build-angular": "~0.901.7",
        "@angular/cli": "^9.1.7",
        "@angular/compiler-cli": "~9.1.9",
        "@types/jasmine": "3.3.10",
        "@types/jasminewd2": "~2.0.3",
        "@types/node": "^12.11.1",
        "codelyzer": "^5.1.2",
        "jasmine-core": "~3.5.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "^5.0.9",
        "karma-chrome-launcher": "~3.1.0",
        "karma-coverage-istanbul-reporter": "^3.0.3",
        "karma-jasmine": "^2.0.1",
        "karma-jasmine-html-reporter": "^1.5.4",
        "protractor": "~5.4.2",
        "ts-node": "~8.0.2",
        "tslint": "~5.12.1",
        "typescript": "~3.8.3"
      }
    }

Я понизил версию пакета до 9.0.6, и он работает хорошо.

Вот ваш пример с модификацией

https://stackblitz.com/edit/primeng9-table-virtualscroll-with-filtering-ok5cvp?file=src/app/app.component.html

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

person José Polanco    schedule 18.11.2020
comment
Эта пониженная версия не работает. Боюсь. Это достигается путем удаления атрибутов виртуальной таблицы прокрутки, хотя - person mindparse; 18.11.2020
comment
Но почему? У вас еще одна ошибка? Вы проверили обновленный пример? - person José Polanco; 18.11.2020
comment
Да, перейдите по ссылке stackblitz и после загрузки таблицы введите название бренда в поле поиска и обратите внимание, как таблица не фильтруется. - person mindparse; 18.11.2020
comment
Извините, проверьте пример еще раз, пожалуйста. я обновил - person José Polanco; 18.11.2020