angular - Mat扩展面板默认打开的bug？

Question

自从 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;
    }

编辑:我将 Material 更新到 5.1.1 同样的问题编辑2:我的选项卡组中有一个“selectedTabIndex”

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

双向绑定(bind)在这里不是一个好主意。但现在，我遇到了另一个问题(单击下一步按钮没有执行任何操作)

Answer 1

终于找到问题了

是关于这个的:*ngIf="selectedIndex == 2"。我用一个 bool 值替换了它，当我更改选项卡时(MatTabChangeEvent)该 bool 值会更新

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

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