12

縦スクロールのカレンダーを作っています。ロードする最初の日を取得していますが、新しい日がリストに追加されると、レンダリングされません。

<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

4

4 に答える 4