Mat扩展面板默认情况下是否打开错误?

问题描述

自从Angular 5发布以来，我的mat扩展面板存在一些问题.它们默认情况下是打开的，我不明白为什么.

Since Angular 5 release, I have some problem with my mat expansion panels. They are opened by default and I don't understand why.

我的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相同的问题我的标签组中有一个"selectedTabIndex"

EDIT : I updated Material to 5.1.1 same problemEDIT 2 : I had a "selectedTabIndex" in my tab-group

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

在这里双向绑定不是一个好主意.但是现在，我还有另一个问题(单击nextStep按钮没有做任何事情)

The two way binding wasn't a good idea here. But now, I have another problem (click on nextStep button doesn't do anything)

推荐答案

我终于找到了问题.

关于此内容:* ngIf ="selectedIndex == 2".我将其替换为布尔值，该值会在我更改标签(MatTabChangeEvent)时更新

It was about this : *ngIf="selectedIndex == 2". I replaced it by a boolean which is updated when I change tab (MatTabChangeEvent)

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

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

这篇关于Mat扩展面板默认情况下是否打开错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！