角度材料扩展面板错误

我正在使用角度5和角度材料2，我正在使用扩展面板元素，每次打开或关闭扩展面板时都会出现此错误

Error

code: 1
    columnNumber: 0
    data: null
    filename: "webpack-internal:///../../../../../src/app/main/content/library/reader/reader.component.ts"
    lineNumber: 30
    message: "Index or size is negative or greater than the allowed amount"
    name: "IndexSizeError"
    ngDebugContext: Object { view: {…}, nodeIndex: 1, nodeDef: {…}, … }
    ngErrorLogger: function bound ()
    result: 2152923137
    stack: "ReaderComponent.prototype.hideBobble@webpack-internal:///../../../../../src/app/main/content/library/reader
/reader.component.ts:30:30\nView_ReaderComponent_0/<@ng:///LibraryModule/ReaderComponent.ngfactory.js:274:23\nhandleEvent@webpack-internal:///../../../core/esm5/core.js:13747:115\ncallWithDebugContext@webpack-internal:
///../../../core/esm5/core.js:15256:39\ndebugHandleEvent@webpack-internal:
///../../../core/esm5/core.js:14843:12\ndispatchEvent@webpack-internal:
///../../../core/esm5/core.js:10159:16\nrenderEventHandlerClosure/<@webpack-internal:///../../../core/esm5/core.js:10784:38\ndecoratePreventDefault/<@webpack-internal:///../../../platform-browser/esm5/platform-browser.js:2680:53\nZoneDelegate.prototype.invokeTask@webpack-internal:
///../../../../zone.js/dist/zone.js:421:17\nonInvokeTask@webpack-internal:
///../../../core/esm5/core.js:4939:24\nZoneDelegate.prototype.invokeTask@webpack-internal:///../../../../zone.js/dist/zone.js:420:17\nZone.prototype.runTask@webpack-internal:///../../../../zone.js/dist/zone.js:188:28
\nZoneTask.invokeTask@webpack-internal:///../../../../zone.js
/dist/zone.js:496:24\ninvokeTask@webpack-internal:///../../../../zone.js
/dist/zone.js:1517:9\nglobalZoneAwareCallback@webpack-internal:///../../../../zone.js/dist/zone.js:1543:17\n"

reader.component.html

<mat-accordion multi="true">
          <!-- CHATPTER -->
          <mat-expansion-panel expanded="true">
            <mat-expansion-panel-header>
              <mat-panel-title>
                {{chapter.title}}
              </mat-panel-title>
              <mat-panel-description>
                <div class="chapter-notification">
                  <mat-icon class="mr-4">search</mat-icon>
                  <mat-icon>check</mat-icon>
                </div>
                <button mat-button><mat-icon>volume_up</mat-icon>Vorlesen</button>
              </mat-panel-description>
            </mat-expansion-panel-header>
            <div class="expasion-panel-content p-20">
              <article *ngFor="let block of chapter.chapterBlocks">
                <p [innerHTML]="block.blockElement.text"></p>
              </article>
            </div>
            <!-- CHAPTER ACTION FOOTER -->
            <div class="chapter-footer py-28 px-20">
              <div class="action-footer-btn">
                <ul>
                  <li><button matTooltip="Gelesen"><mat-icon class="blue-800-fg">search</mat-icon></button></li>
                  <li><button matTooltip="Verstanden"><mat-icon class="green-500-fg">check</mat-icon></button></li>
                  <li><button matTooltip="Wiederholen"><mat-icon class="yellow-900-fg">error_outline</mat-icon></button></li>
                </ul>
              </div>
              <div class="rate">
                <div class="stars">
                  <mat-icon class="mr-4 yellow-700-fg">star</mat-icon>
                  <mat-icon class="mr-4 yellow-700-fg">star</mat-icon>
                  <mat-icon class="mr-4 yellow-700-fg">star</mat-icon>
                  <mat-icon class="mr-4 yellow-700-fg">star</mat-icon>
                  <mat-icon class="yellow-700-fg">star_border</mat-icon>
                </div>
                <button class="ml-4" matTooltip="Kommentar verfassen">
                  <mat-icon class="teal-500-fg">chat</mat-icon>
                </button>
              </div>
            </div>
            <!-- / CHAPTER ACTION FOOTER -->
          </mat-expansion-panel>
          <!-- / CHATPTER -->
        </mat-accordion>

reader.component.ts

import { AfterViewInit, ChangeDetectorRef, Component, OnDestroy, OnInit, QueryList, ViewChildren, ViewEncapsulation, ElementRef, ViewChild } from '@angular/core';
import { fuseAnimations } from '../../../../core/animations';
import { LibraryService } from '../../../../services/library/library.service';
import { Subscription } from 'rxjs/Subscription';
import { FusePerfectScrollbarDirective } from '../../../../core/directives/fuse-perfect-scrollbar/fuse-perfect-scrollbar.directive';

import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'fuse-reader',
  templateUrl: './reader.component.html',
  styleUrls: ['./reader.component.scss'],
  animations: fuseAnimations
})
export class ReaderComponent implements OnInit, AfterViewInit {
  @ViewChild('bobbleComment') bobble: ElementRef;
  public display: string;
  public chaptersContent: any;
  public chapterSubscription: Subscription;
  public currentStep: number = 0;
  public chapterStepContent: any;
  public animationDirection: 'left' | 'right' | 'none' = 'none';
  @ViewChildren(FusePerfectScrollbarDirective) fuseScrollbarDirectives: QueryList<FusePerfectScrollbarDirective>;

  constructor(
    private libraryServices: LibraryService,
    private routerParams: ActivatedRoute,
    private changeDetectorRef: ChangeDetectorRef
  ) { }

  ngOnInit() {

    this.initDocumentData();
  }

  ngAfterViewInit() {
    this.chapterStepContent = this.fuseScrollbarDirectives.find((fuseScrollbarDirective) => {
      return fuseScrollbarDirective.element.nativeElement.id === 'course-step-content';
    });
  }


  public moveToChapter(chapterIndex: number): void {
    this.animationDirection = this.currentStep < chapterIndex ? 'left' : 'right';
    this.changeDetectorRef.detectChanges();
    this.currentStep = chapterIndex;
  }

  public gotoNextStep(): void {
    if (this.currentStep === this.chaptersContent.length - 1) {
      return;
    }
    this.animationDirection = 'left';
    this.changeDetectorRef.detectChanges();
    this.currentStep++;
  }

  public gotoPreviousStep(): void {
    if (this.currentStep === 0) {
      return;
    }
    this.animationDirection = 'right';
    this.changeDetectorRef.detectChanges();
    this.currentStep--;
  }


  public initDocumentData(): void {
    const book = this.routerParams.snapshot.params['book'];
    this.libraryServices.getAllChaptersBlocks(book)
      .then((res) => {
        this.chaptersContent = res;
      });

  }

}

在这里我用html和ts文件更新问题，由于某种原因，这个错误只发生在我打开或关闭扩展面板时，只发生在该元素上 .