Переменная рендеринга из ngAfterViewInit () работает неправильно

Question

Любая переменная изменяется в ngAfterViewInit (), работающем в последнее время.

Здесь приложение stackblitz https://stackblitz.com/edit/angular-vvgbrs

Файл компонента

import {ChangeDetectionStrategy,ViewChild,AfterViewInit,Component,ChangeDetectorRef} from '@angular/core';
import {CdkVirtualScrollViewport} from '@angular/cdk/scrolling';

@Component({
  selector: 'cdk-virtual-scroll-overview-example',
  styleUrls: ['cdk-virtual-scroll-overview-example.css'],
  templateUrl: 'cdk-virtual-scroll-overview-example.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CdkVirtualScrollOverviewExample implements AfterViewInit {
  index: number = 1;
  @ViewChild(CdkVirtualScrollViewport) viewPort: CdkVirtualScrollViewport;
  items = Array.from({length: 100000}).map((_, i) => `Item #${i}`);

  constructor(private cdRef:ChangeDetectorRef){}

  ngAfterViewInit():void {
    this.viewPort.scrolledIndexChange.subscribe(index => {
      console.log(index);
      this.index = index;
    });
    this.cdRef.detectChanges();
  }
}

HTML Файл

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item">{{item}}</div>
</cdk-virtual-scroll-viewport>
{{index}}

При прокрутке виртуальной вкладки значение индекса меняется, и это не проблема. но при сравнении с console.log () со значением индекса в браузере кажется, что значения обновляются в последнее время, а не в данный момент. Что я пропустил?

Различия

Моя цель - переменная должна быть синхронизирована. если вывод консоли равен 1, то отображаемое значение индекса HTML должно быть 1. Пожалуйста, помогите мне с тем, что я пропустил?

Answer 1

Вам необходимо запустить обнаружение изменений внутри блока подписки, чтобы он запускался сразу после изменения прокрутки.

  ngAfterViewInit():void {
    this.viewPort.scrolledIndexChange.subscribe(index => {
      console.log(index);
      this.index = index;
      this.cdRef.detectChanges();
    });
  }

Пожалуйста, используйте этот экземпляр stackblitz - https://stackblitz.com/edit/angular-vvgbrs-pjg28g