Can’t bind to ‘items’ since it isn’t a known property of ‘virtual-scroller’
在我的 ionic 4 Angular 项目中实现虚拟滚动时遇到问题。
以前，我使用了 ionic 的虚拟滚动 (ion-virtual-scroll) 实现，它最初工作得很好，但遇到了一个可以说是它不支持我的应用程序所需的 ionic 网格视图的警告。
(Ionic 已经在他们的仓库中的”功能请求”下承认了这一点：https://github.com/ionic-team/ionic/issues/16632)
与此同时，我使用了 ngx-virtual-scroller (https://github.com/rintoj/ngx-virtual-scroller)，因为它提供了多列支持
但是，我在项目中使用时遇到了问题。
我已经通过 npm (npm install ngx-virtual-scroller –save) 安装了它，并在我的 app.module 中导入了 VirtualScrollerMoudle
app.module.ts
|
1
2 3 4 5 6 |
import { VirtualScrollerModule } from ‘ngx-virtual-scroller’
imports: [ |
我已经在我的组件视图中将 virtual-scroller 标签包裹在我的元素周围
product-card-view.component.html
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<virtual-scroller #scroll [items]=”productsArray”>
<ion-row> <ion-col size=”6″ *ngFor=”let p of scroll.viewPortItems”> <ion-card> <ion-card-header> {{ p.title }} </ion-card-header> <ion-card-content> ….. ETC ….. </ion-card-content> </ion-card> </ion-col> </ion-row> </virtual-scroller> |
但是我收到了这个错误
控制台错误
core.js:9110 ERROR Error: Uncaught (in promise): Error: Template parse errors:
Can’t bind to ‘items’ since it isn’t a known property of ‘virtual-scroller’.
1. If ‘virtual-scroller’ is an Angular component and it has ‘items’ input, then verify that it is part of this module.
2. If ‘virtual-scroller’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message.
3. To allow any property add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component.
在寻找解决方案后，我遇到了遇到类似问题但使用 Ionic 3 (https://github.com/rintoj/ngx-virtual-scroller/issues/85) 和他们的其他人
解决方案是将 VirtualScrollMoudle 导入使用它的子模块而不是全局应用程序模块，并指示它可能需要做一些事情
对组件使用延迟加载。
不幸的是，我尝试这样做无济于事。我尝试仅将 VirtualScrollMoudle 导入到 app.module.ts，这是正在使用的组件的父页面模块
仅 virtual-scoller 并且两者同时出现，但遇到了相同的问题。
home.module.ts
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import { VirtualScrollerModule } from ‘ngx-virtual-scroller’
@NgModule({ |
我还确保导入语句位于底部，正如我所看到的那样，它已经成功吸引了很多人(包括过去的我自己)
有什么解决办法还是我遗漏了一些很明显的东西？
版本：
离子 4 (5.4.4)
angular：8.1.3
- 尝试重新启动 ng serve 有时它不会获取对文件的更改。
- 我试了一下，但遗憾的是没有运气，我尝试了全新的构建和 npm install 以确保它也已安装。 ionic 4 和这个模块之间可能有一个小怪癖
- product-card-view 在哪个模块中声明？
- 它通过共享模块在 home.module.ts 页面中声明，但我刚刚注意到该组件也出现在其他页面上，因为它包含在其他页面使用的共享模块中。我认为这不会导致此错误，但我可能会尝试将组件隔离到一页以查看结果
- 您应该将滚动模块导入到声明使用它的组件的共享模块中。将其添加到其他模块不会使其可用。
- 你说得对，我可以说这是漫长的一天，因为我还没有想过这样做：D 我会试一试，如果它有效，我会告诉你。感谢您的快速回复！
更新
非常感谢@Reactgular，我已经解决了这个问题！
由于我的 product-card-view.component 在共享模块中，我需要在共享模块中导入虚拟滚动模块，而不是在 app.module.ts 或父页面模块中单独导入
product-shared.module.ts
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { NgModule } from ‘@angular/core’;
import { CommonModule } from ‘@angular/common’; import { IonicModule } from ‘@ionic/angular’; import { FontAwesomeModule } from ‘@fortawesome/angular-fontawesome’; import { VirtualScrollerModule } from ‘ngx-virtual-scroller’; // Product card component @NgModule({ |
我会留下这个答案，希望它可以帮助将来遇到类似问题的任何人
来源：https://www.codenong.com/59270768/
