* 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);
}
}
}
Все в порядке, но он показывает «=====> Невозможно связать с« cdkVirtualForOf », так как это не известное свойство« div ». <==== = " ОШИБКА
Вы импортировали ScrollDispatchModule?
да, уже импортировал, но он показывает ту же ошибку.
Невозможно выполнить привязку к cdkVirtualForOf, так как это неизвестное свойство div.
Поэтому вы должны обновить свой вопрос с этой информацией. По вашему вопросу единственный импортируемый модуль — это ScrollingModule
Ответы 6
Вы должны импортировать ScrollDispatchModule:
import { ScrollDispatchModule } from '@angular/cdk/scrolling';
И добавьте его в массив inports в NgModule:
@NgModule({
...
imports: [
ScrollDispatchModule
],
...
})
Теперь добавьте несколько стилей в свой div:
.example-viewport {
height: 200px;
width: 200px;
border: 1px solid black;
}
.example-item {
height: 50px;
}
У меня работает) удачи)
Между версиями Angular 7.3.7 и 8.1.4 имя ScrollDispatchModule устарело в пользу более нового ScrollingModule.
Мне пришлось импортировать и экспортировать ScrollingModule в мой общий модуль, чтобы удалить ошибку.
попробуйте это, это работает для меня.
<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>
Он работает как обычный список, а не виртуализированный.
*cdkVirtualFor следует использовать вместо *ngFor
(Отсылка к https://pusher.com/tutorials/infinite-scrolling-angular-cdk) используйте *cdkVirtualFor вместо ngFor
Вы используете *ngFor, в то время как вы должны использовать *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>
Стоит отметить, что модуль должен быть зарегистрирован.
Добавить ниже
import {ScrollingModule} from '@angular/cdk/scrolling';
imports: [
ScrollingModule
]
Удалить ниже
import {CdkVirtualScrollViewport} from "@angular/cdk/scrolling";
imports: [
CdkVirtualScrollViewport
]
Интересно, решили ли вы проблему.
В моем случае компонент, пытающийся использовать <cdk-virtual-scroll-viewport>, отсутствовал в части declarations файла app.module.ts.
Проблема возникла в совсем не ожидаемой области, и решить ее было сложно.
Я надеюсь, что это решение поможет вам.
В чем проблема? Не могли бы вы также опубликовать свой код CSS?