web-dev-qa-db-ja.com

* cdkVirtualForは私のアプリケーションでは機能していません、Angular 7.2.0

<ul class="list">
  <cdk-virtual-scroll-viewport  style="height: 500px" itemSize="90" >
      <div *ngFor="let n of numbers" style="height:130px;">{{n}}</div>
  </cdk-virtual-scroll-viewport>
</ul>

<!--app.module.ts-->

import { ScrollingModule } from '@angular/cdk/scrolling';

@NgModule({
  imports: [ ScrollingModule ]
})

<!--app.component.ts-->

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  numbers: number[] = [];

  constructor() {
    for (let index = 0; index < 10000; index++) {
      this.numbers.Push(index);
    }
  }
}

すべて問題ありませんが、「div」の既知のプロパティではないため、「=====>「cdkVirtualForOf」にバインドできません。<===== "エラー

angular-materialangular7
2
Samudrala Ramu

ScrollDispatchModuleをインポートする必要があります。

import { ScrollDispatchModule } from '@angular/cdk/scrolling';

そしてそれをNgModuleのinports配列に追加します。

@NgModule({
  ...
  imports: [
    ScrollDispatchModule
  ],
  ...
})

次に、divにいくつかのスタイルを追加します。

.example-viewport {
    height: 200px;
    width: 200px;
    border: 1px solid black;
  }

.example-item {
    height: 50px;
}

それは私のために働きます）幸運）

8
Dmitry

enter image description here

（ https://pusher.com/tutorials/infinite-scrolling-angular-cdk から参照）ngForの代わりに* cdkVirtualForを使用します

0
Kalana Suraweera