2

尝试在 PrimeNG 的表格组件上组合虚拟滚动和过滤功能时，我遇到了我认为是错误的错误。

在启用并尝试过滤这两个功能的情况下，渲染的数据不会被过滤掉，但我已经设法通过被调用的primeng过滤器函数进行调试，并且可以看到底层确实被过滤了，我怀疑这是什么更多与内部如何以某种方式使用 CDK 虚拟滚动条实例有关。

可复制的演示- https://stackblitz.com/edit/primeng9-table-virtualscroll-with-filtering?file=src/app/app.component.html

使用上面的 url，只需按返回的任何数据列进行过滤，例如品牌名称。

第一个演示使用虚拟滚动，并且请在过滤时观察控制台输出，因为我在这里捕获 onFilter 表事件的结果并计算输入过滤搜索词的匹配过滤记录的长度。您将看到结果如何被清楚地匹配和返回，但表中的行永远不会相应地过滤，始终显示原始呈现的行。

为了进一步证明我的怀疑，我认为在某种程度上是primeNG中使用CDK虚拟滚动条的错误，您可以在stackblitz演示中删除以下两个表格属性：

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

删除这些并禁用虚拟滚动后，过滤功能将按预期运行，仅在表中显示匹配结果，但当然它会失去启用虚拟滚动的性能优势。

所以我的问题是，我怎么能在这里两者兼得？

顺便说一句 - 是的，我使用的是 PrimeNG 9，而 10 是最新的，但由于各种原因，我正在进行的项目仍在 9 上，并且会持续一段时间，所以我正在寻找 v9 修复\解决方法，如果可能的话。

谢谢你的时间！

4

1 回答 1

0

经过一些测试，我发现这个问题是由您使用的版本引起的。如您所说，您不能升级版本，但降级呢？

    {
      "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

我希望您可以降级并修复问题，直到您可以将其更新到最新版本。

于 2020-11-18T16:13:53.913 回答