Question

垫子扩展面板有问题。我有嵌套的垫子扩展面板，这些面板由“面板控件”（查看代码）控制，以允许多个打开的垫子扩展面板。

除了默认情况下第一个垫子扩展面板打开并显示为越野车之外，每个人都工作正常。关闭面板并再次打开后，一切正常。

HTML：

 <mat-accordion id="headacc" multi="true" *ngFor="let account of accounts; let i = index;">
              <mat-expansion-panel id="headexp1" (opened)="onPanelOpen((i+1))" (closed)="onPanelClosed()" [expanded]="false">

                <mat-expansion-panel-header id="header">
                  *some irrelevant code*
                </mat-expansion-panel-header>

                <mat-accordion id="subacc">

                  <mat-expansion-panel id="subexp" multi="true"
                    *ngFor="let transaction of transactions[i]; let j = index;"
                    (opened)="onChildPanelOpen((i+1), (j+1))" [expanded]="false">

                    <mat-expansion-panel-header id="subheader">
                      *some irrelevant code*
                    </mat-expansion-panel-header>
                    *some irrelevant code*
                  </mat-expansion-panel>
                </mat-accordion>
              </mat-expansion-panel>
            </mat-accordion>

打字稿：

panels = [0, 1, 2];
childPanels = [11, 22, 33];
selectedPanel = 0;
childopened = false;

onPanelOpen(x: number) {
    console.log(`Panel ${x} opened.${this}`);
    this.childopened = true;
    this.changeDetectorRefs.detectChanges();
  }

  onPanelClosed(x: number) {
    this.childopened = false;
  }

  onChildPanelOpen(x: number, y: number) {
    console.log(`Panel ${x} opened, Child Panel ${y} opened.`);
    this.changeDetectorRefs.detectChanges();
  }

加载页面后，它看起来像这样： Buggy view

有人知道这是一个错误还是我做错了什么？

编辑：我创建了一个堆叠闪电战：https://stackblitz.com/edit/angular-jjwihs

Mat Expansion Panel默认情况下会打开

0 个答案: