angular - 无法绑定(bind)到 'items'，因为它不是 'virtual-scroller' 的已知属性

Question

我在将虚拟滚动实现到我的 ionic 4 + Angular 项目中时遇到问题。

之前，我使用了 ionic 的虚拟滚动 (ion-virtual-scroll) 实现，它最初运行良好，但遇到了一个可以说是很大的警告，它不支持 ionic 的 GridView ，而这是我的应用程序所必需的。 (Ionic 已在“功能请求”下的 repo 协议(protocol)中承认了这一点: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

import { VirtualScrollerModule } from 'ngx-virtual-scroller'

imports: [
    ...
    VirtualScrollerModule
],

我已经将 virtual-scroller 标签包裹在组件 View 中的元素周围

product-card-view.component.html

<virtual-scroller #scroll [items]="productsArray">
  <div *ngIf="columnViewActive; else listView">
    <ion-row>
      <ion-col size="6" *ngFor="let p of scroll.viewPortItems">
        <ion-card>
          <ion-card-header>
            <a class="productTitleColumn" title="{{ p.title }}" href="{{ p.link }}">{{ p.title }}</a>
          </ion-card-header>
          <ion-card-content>
            ..... ETC .....
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </div>
</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 only 并且同时遇到了同样的问题。

home.module.ts

import { VirtualScrollerModule } from 'ngx-virtual-scroller'

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ]),
    FontAwesomeModule,
    ProductSharedModule,
    HeaderFooterSharedModule,
    HideHeaderSharedModule,
    VirtualScrollerModule
  ],
  declarations: [HomePage]
})
export class HomePageModule { }

我还确保 import 语句位于底部，正如我所见，这已经吸引了很多人(过去包括我自己)

是否有任何解决方案，或者我是否遗漏了一些非常明显的东西？

版本:

ionic 4 (5.4.4)

Angular :8.1.3

Answer 1

更新

非常感谢@Reactgular我已经解决了问题!

由于我的 product-card-view.component 位于共享模块中，因此我需要在共享模块中导入虚拟滚动模块，不要在任一应用中单独导入.module.ts 或父页面模块

product-shared.module.ts

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
import { ProductCardViewComponent } from '../../components/products/product-card-view/product-card-view.component';

@NgModule({
  declarations: [ProductCardViewComponent],
  imports: [CommonModule, IonicModule, FontAwesomeModule, VirtualScrollerModule],
  exports: [ProductCardViewComponent]
})
export class ProductSharedModule { }

我会留下这个答案，希望它能帮助将来遇到类似问题的任何人