* cdkVirtualFor在我的应用程序中不起作用，在Angular 7.2.0中

Question

<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);
    }
  }
}

一切都很好，但是显示为“ =====>无法绑定到'cdkVirtualForOf'，因为它不是'div'的已知属性。<=====”错误

Answer 1

在下方添加

import {ScrollingModule} from '@angular/cdk/scrolling';
imports: [
    ScrollingModule
  ]

从下面删除

import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling";
imports: [
    CdkVirtualScrollViewport
  ]

Answer 2

您应该导入ScrollDispatchModule：

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

并将其添加到NgModule的输入数组中：

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

现在向您的div添加一些样式：

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

.example-item {
    height: 50px;
}

对我有用）祝你好运

Answer 3

尝试一下，它对我有用。

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

Answer 4

（引自https://pusher.com/tutorials/infinite-scrolling-angular-cdk） 使用* cdkVirtualFor代替ngFor

Answer 5

您正在使用*ngFor，而您应该使用official documentation中提到的*cdkVirtualFor。

在下面尝试此代码：

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