角度：cdkVirtual用于不渲染新项目

Question

我在做一个垂直滚动的日历。我正在加载初始日期，但是当新的日期被添加到列表中时，它们没有被渲染。

<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

Answer 1

而不是

this.days = days;

做

this.days = [...days];

作品。https://stack blitz . com/edit/material-infinite-calendar-amcapx？file = src/app/calendar/calendar . component . ts

Answer 2

我想通了。

最初，我是通过像这样抓取当前值来添加新天数

let items = this.items$.value;
items.push(newItem);
this.items$.next(items)

显然，这实际上是BehaviorSubject值的一个变异，因此不会创建一个新的数组来返回，也不会触发更改检测。

我把它改成了

let items = [...this.items$.value];
items.push(newItem);
this.items$.next(items)

一切都很好。

因此，尽管这里的答案是正确的，因为我正在改变原始数组，但我需要的信息是使用改变的版本调用Next（）'s当前值不会发出新数组。emit事件不能保证不变性。

Answer 3

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

检查这个非常简单的stackblitz…这里我使用了两种方法，你可以尝试看看：

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

这是addCountry New的代码：

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