*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

您应该导入一个 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;
}

它对我有用）祝你好运）

Answer 2

添加如下

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

删除下面

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