我正在一个项目中工作,我需要显示更多 1000 条记录,并考虑使用来自 Angular Material CDK 的虚拟滚动,但由于某种原因,我收到此错误:错误:CdkVirtualScrollViewport 已附加。
.
模板
<div class="news-feeds-wrapper">
<div class="news-feeds-icon" *ngIf="configService.config.showNewsFeeds" (click)="toggleNewsFeeds()">
<span *ngIf="platform.EDGE || platform.TRIDENT" class="icon-hype-notification_important"></span>
<mat-icon *ngIf="!platform.EDGE && !platform.TRIDENT">notification_important</mat-icon>
</div>
<cdk-virtual-scroll-viewport itemSize="50">
<div class="news-feeds-list" [ngClass]="{'open': newsFeedOpen}">
<div *cdkVirtualFor="let group of newsFeeds">
<div class="time" *ngIf="group.values.length > 0">{{group.type}}</div>
<div class="news-feed" *cdkVirtualFor="let item of group.values | async">
<div class="header">
<i [ngSwitch]="item.action_type">
<mat-icon *ngSwitchCase="'Task Assignment'">swap_horiz</mat-icon>
<mat-icon *ngSwitchCase="'User Mention'">chat</mat-icon>
<mat-icon *ngSwitchCase="'Task Deleted'">no_sim</mat-icon>
</i>
<span>{{item.action_type}}</span>
<mat-icon class="deleted-news-feed" (click)="deletedNewsFeeds(group.values, item)">clear</mat-icon>
</div>
<div class="news-feed-content">
<div class="info-content">
<p class="project">{{item.project}}</p>
<p class="taskboard">{{item.task_board}}</p>
<p class="board-item">{{item.task_board_item}}</p>
</div>
<div class="avatar">
</div>
</div>
</div>
</div>
</div>
</cdk-virtual-scroll-viewport>
</div>
组件
@Component({
selector: 'news-feeds',
templateUrl: '../templates/news-feed.component.html',
styleUrls: ['../../assets/scss/news-feeds.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class NewsFeedsComponent implements OnInit {
public newsFeedOpen = false;
public newsFeeds: Array<any> = [];
@HostListener('document:click', ['$event'])
closeNewsFeeds(event) {
if (this.newsFeedOpen && event.target.localName != 'mat-icon') {
this.newsFeedOpen = false;
}
}
constructor(public platform: Platform, public configService: HypeConfigService, private cd: ChangeDetectorRef, private log: LoggingService, private backlogService: BacklogTaskService) {
//
}
ngOnInit() {
//
}
toggleNewsFeeds() {
this.backlogService.getNewsFeeds().subscribe(
(response) => {
this.newsFeedOpen = !this.newsFeedOpen;
this.newsFeeds = response;
this.cd.markForCheck();
},
(error) => {
this.log.error(`Error loading the news feeds: ${error}`);
}
);
}
deletedNewsFeeds(group: Array<any>, newsFeed: any) {
const index = group.findIndex((i) => i.id === newsFeed.id);
group.splice(index, 1);
}
}
因此,出于某种原因,告诉我 CdkVirtualScrollViewport 已附加,但我没有在应用程序的任何其他地方使用。 stackblitz
最佳答案
该问题是由于您使用了 *cdkVirtualFor 两次,一次在另一次里面...... 为了解决这个问题,我做了 2 处更改;
- app.component.html:使用 *ngFor 而不是 *cdkVirtualFor,所以
-
<div class="news-feed" *ngFor="let item of group.values">
而不是 -
<div class="news-feed" *cdkVirtualFor="let item of group.values">
-
- app.component.css:已添加
cdk-virtual-scroll-viewport { height:400px; }
因为height is zero by default
下面的代码片段中的 HTML 更改和 CSS 添加
cdk-virtual-scroll-viewport {
height: 400px;
}
<div class="news-feeds-wrapper">
<div class="news-feeds-list open">
<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
<div *cdkVirtualFor="let group of newsfeeds">
<div class="time">{{group.type}}</div>
<div class="news-feed" *ngFor="let item of group.values">
<div class="header">
<span>{{item.action_type}}</span>
<mat-icon class="deleted-news-feed">clear</mat-icon>
</div>
<div class="news-feed-content">
<div class="info-content">
<p class="project">{{item.project}}</p>
<p class="taskboard">{{item.task_board}}</p>
<p class="board-item">{{item.task_board_item}}</p>
</div>
<div class="avatar">
</div>
</div>
</div>
</div>
</cdk-virtual-scroll-viewport>
</div>
</div>
关于angular - CdkVirtualScrollViewport 已附加(错误),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54419108/