Событие mat-expansion-panel «закрыто» вызывается со случайным индексом вместо «уничтожено»

Question

Я используюmat-expansion-panelвнутриcdk-virtual-scroll. Я хочу запустить функцию, когда панель уничтожается после прокрутки, но(closed)событие вызывается вместо(destroyed)событие, имеющее случайноеindexкак параметр.

      <mat-accordion>
  <cdk-virtual-scroll-viewport itemSize="50" [minBufferPx]="700" [maxBufferPx]="1000" scrollWindow>
    <mat-expansion-panel *cdkVirtualFor="let item of items;  let i = index;" 
    (opened)="panelOpened(i)"
    (closed)="panelClosed(i)"
    (destroyed)="panelDestroyed(item.status, i)" 
    [(expanded)]="item.status">
      <mat-expansion-panel-header>
        <mat-label>
          <mat-label> {{item.id}} </mat-label>
          <mat-label> isOpened: {{item.status}}</mat-label>
        </mat-label>
      </mat-expansion-panel-header>
      <div>
        <div>{{item.detail}}</div>
        <div>
          <button mat-raised-button color="accent">OK</button>
        </div>
      </div>
    </mat-expansion-panel>
  </cdk-virtual-scroll-viewport>
</mat-accordion>

Вы можете протестировать сценарий здесь

Шаги для воссоздания проблемы:

• открыть консоль
• открыть любую панель расширения (допустимitem5)
• прокрутите вниз, пока открытая панель не будет уничтожена.
• консоль покажетClosed 'random index number'сообщение вместоDestroyed 5.

я не хочу использоватьtemplateCacheSize: 0, это вызывает медленную визуализацию элементов при прокрутке.