Question

我正在构建一个垂直滚动日历。我正在加载初始日期，但是当新日期添加到列表中时，不会呈现它们。

com.ibm.db2.jcc.DB2ConnectionPoolDataSource.maxStatements

我有一个<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

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

Answer 1

我知道了。

最初，我是通过抓住这样的当前值来添加新的一天

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()并使用变异版本BehaviorSubject的当前值不会发出 new 数组。 emit事件不能保证不变。

Answer 2

可以这样做：

您可以将另一个变量初始化为行为观察对象“ days $”。

在calendar-days.service.ts

  public days$: BehaviorSubject<Date[]>;
  public dayObs$: Observable<Date[]>

  constructor() {
    this.days$ = new BehaviorSubject<Date[]>(this._initialDays);
    this.dayObs$ = this.days$.asObservable();
  }

然后在ngOnInit中的calender.component.ts中订阅该可观察项，如下所示：

this._daysService.dayObs$.subscribe(days => {
  this.days = days;
})

Answer 3

*cdkVirtualFor仅在您进行不可变更新的情况下才会更新，即初始化后无法更新数组。我们使用价差运算符来获取您想要的东西。

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

addCountryOld方法通过将一个对象推到我们的数组来使数组发生变化，因此渲染视图不会更新。
addCountryNew方法通过散布运算符使用不变性，从而导致渲染视图得到更新。

这是 addCountryNew 的代码：

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

Answer 4

代替

this.days = days;

做

this.days = [...days];

工作。 https://stackblitz.com/edit/material-infinite-calendar-amcapx?file=src/app/calendar/calendar.component.ts

（但这是否意味着BehaviorSubject不断重复使用和变异同一对象？很奇怪！）

cdkVirtualFor不呈现新项目

4 个答案: