3

仮想スクロールを 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

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

imports: [
    ...
    VirtualScrollerModule
],

コンポーネントのビュー内の要素を virtual-scroller タグで囲みました

商品カードビュー.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 エラー エラー: キャッチされていません (約束されています): エラー: テンプレート解析エラー: 「仮想スクロール」の既知のプロパティではないため、「アイテム」にバインドできません。1. 「virtual-scroller」が Angular コンポーネントで、「items」入力がある場合は、それがこのモジュールの一部であることを確認します。2. 「virtual-scroller」が Web コンポーネントの場合、このメッセージを抑制するために、このコンポーネントの「@NgModule.schemas」に「CUSTOM_ELEMENTS_SCHEMA」を追加します。3. 任意のプロパティを許可するには、このコンポーネントの「@NgModule.schemas」に「NO_ERRORS_SCHEMA」を追加します。

解決策を探した後、Ionic 3 ( https://github.com/rintoj/ngx-virtual-scroller/issues/85 )で同様の問題に直面した他の誰かに出くわし、彼らの解決策は VirtualScrollMoudle をグローバルアプリモジュールの代わりに使用されていた場所の子モジュールであり、コンポーネントの遅延読み込みの使用に関係している可能性があることを示しています。

残念ながら、私はそれを試みましたが無駄でした。VirtualScrollMoudle を app.module.ts のみにインポートしようとしました。これは、virtual-scoller のみと両方を同時に使用しているコンポーネントの親ページ モジュールですが、同じ問題に遭遇しました。

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

また、インポートステートメントが一番下にあることを確認しました。これは、かなり多くの人々を捕まえることができたのを見たからです (過去の私を含む)。

解決策はありますか、それとも明らかな何かが欠けていますか?

バージョン:

イオン 4 (5.4.4)

角度: 8.1.3

4

1 に答える 1