Mat扩展面板默认打开bug？-Java 学习之路

自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按钮不做任何事）

2 回答

-1

我终于找到了问题 .

这是关于：* ngIf =“selectedIndex == 2” . 我用布尔值替换它，当我更改选项卡时更新（MatTabChangeEvent）

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

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

回复于 2024-04-28T05:24:45+08:00

生产环境版本不支持（关闭）和（打开）方法 . 最好添加类似下面的东西更好 .

<mat-expansion-panel
          #expPanel>

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

回复于 2024-04-28T05:24:45+08:00

Mat扩展面板默认打开bug？

2 回答

相关问题