web-dev-qa-db-fra.com

* CDKVirtual pour ne fonctionne pas dans mon application, c'est dans 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);
    }
  }
}

Tout va bien mais sa montrage "=====> ne peut pas se lier à" CDKVirtualForof "car ce n'est pas un bien connu de 'div'. <=====" Erreur

angular-materialangular7
4
Samudrala Ramu

Vous devez importer un ScrollDisPatchModule:

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

Et ajoutez-le dans Inports Array dans NGMODULE:

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

Ajoutez maintenant des styles à votre div:

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

.example-item {
    height: 50px;
}

Ça marche pour moi) bonne chance)

8
Dmitry

enter image description here

(Renvoyé de - https://pusher.com/tatudials/infinite-scrolling-angular-cdk ) Utilisez * CDKVirtualFor au lieu de NGUR

0
Kalana Suraweera