Mat扩展面板默认打开的bug？答案

【问题标题】：Mat expansion panel is opened by default bug?Mat扩展面板默认打开的bug？
【发布时间】：2022-01-19 14:06:00
【问题描述】：

自从 Angular 5 发布以来，我的垫子扩展面板出现了一些问题。它们默认打开，我不明白为什么。

我的html

<div *ngFor="let block of blocks; let i = index;">
<mat-expansion-panel *ngIf="selectedIndex == 2" (closed)="onClosed(i)" (opened)="onOpened(i)" [expanded]="expansionPanelIndex === i">
    <mat-expansion-panel-header>
        <mat-panel-title>
           ....
        </mat-panel-title>
        <mat-panel-description>
           ...
        </mat-panel-description>
     </mat-expansion-panel-header>
</mat-expansion-panel>
</div>

在我的组件中

    tabChanged(tabChangeEvent: MatTabChangeEvent): void {
        this.selectedIndex = tabChangeEvent.index;
    }

    onOpened(i) {
        this.expansionPanelIndex = i;
    }

    onClosed(i) {
      this.expansionPanelIndex = -1;
    }

编辑：我将材料更新为 5.1.1 同样的问题编辑 2：我的标签组中有一个“selectedTabIndex”

<mat-tab-group [(selectedIndex)]="selectedIndex" (selectedTabChange)="tabChanged($event)">
...
<mat-expansion-panel ...>
</mat-expansion-panel>
</mat-tab-group>

双向绑定在这里不是一个好主意。但是现在，我有另一个问题（点击nextStep按钮没有做任何事情）

【问题讨论】：

您需要expansionPanelIndex 做什么？是不是因为您希望一次打开的面板不超过一个？
是的，就是这样。我想我发现了我的问题。我编辑了我的第一篇文章。

标签： angular angular-material

【解决方案1】：

我终于找到了问题。

大概是这样：*ngIf="selectedIndex == 2"。我将它替换为一个布尔值，当我更改选项卡时会更新它（MatTabChangeEvent）

    tabChanged( tabChangeEvent: MatTabChangeEvent ): void {
        this.selectedIndex = tabChangeEvent.index;

        if (this.selectedIndex == 2) {
            this.displayBlock = true;
        }
        else {
            this.displayBlock = false;
        }
    }

【讨论】：

（关闭）和（打开）方法在生产构建中不受支持。

【解决方案2】：

（关闭）和（打开）方法在生产构建中不受支持。最好添加类似以下的内容。

          <mat-expansion-panel
          #expPanel>

          <mat-expansion-panel-header
            (click)="changeActiveIndex(expPanel.expanded, i)">
          </mat-expansion-panel-header>
          </mat-expansion-panel>

【讨论】：

我不知道您使用的是 Angular 版本，但它对我有用 (5.2.10)。