时间戳

首页 > 解决方案 > Angular：cdkVirtualFor 不渲染新项目

javascript - Angular：cdkVirtualFor 不渲染新项目

问题描述

我正在构建一个垂直滚动的日历。我正在加载最初的日子，但是当新的日子被添加到列表中时，它们不会被渲染。

<cdk-virtual-scroll-viewport
  class="demo-viewport"
  [itemSize]="100"
  (onContentScrolled)="handleScrollChange($event)"
>
  <calendar-day
    *cdkVirtualFor="let day of days; trackBy: trackByFn"
    [day]="day"
  ></calendar-day>
</cdk-virtual-scroll-viewport>
<button (click)="goToToday()">go</button>

我有一项BehaviorSubject更新日期的服务。我知道日期列表正在更新，但似乎没有检测到更改。

  ngOnInit() {
    this._daysService.days$.subscribe(days => {
      this.days = days;
    })
    this.watchScroll();
    this.handleScrollingUp();
    this.handleScrollingDown();
  }

有关更多信息，StackBlitz 存储库是公开的https://stackblitz.com/edit/material-infinite-calendar

标签： javascriptangulartypescriptangular-materialvirtualscroll

解决方案

只有当*cdkVirtualFor你不可变地更新它时才会更新它，即在初始化后你不能更新数组。我们使用扩展运算符来获取您要查找的内容。

检查这个非常简单的stackblitz ...在这里我使用了 2 种方法，您可以尝试看看：

  • addCountryOld方法通过将对象推送到我们的数组来改变数组，因此渲染的视图不会更新。
  • addCountryNew方法通过扩展运算符使用不变性，从而导致渲染视图得到更新。

这是addCountryNew的代码：

addCountryNew(){
    let  newObj = {'name':'stack overflow country', "code":'SO'};
    this.myList = [...this.myList, newObj];
  }

推荐阅读