自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>
&#13;
在我的组件中
tabChanged(tabChangeEvent: MatTabChangeEvent): void {
this.selectedIndex = tabChangeEvent.index;
}
onOpened(i) {
this.expansionPanelIndex = i;
}
onClosed(i) {
this.expansionPanelIndex = -1;
}
编辑:我将Material更新为5.1.1同样的问题
编辑2:我有一个&#34; selectedTabIndex&#34;在我的标签组中
<mat-tab-group [(selectedIndex)]="selectedIndex" (selectedTabChange)="tabChanged($event)">
...
<mat-expansion-panel ...>
</mat-expansion-panel>
</mat-tab-group>
双向约束在这里不是一个好主意。但现在,我有另一个问题(点击nextStep按钮不做任何事情)
答案 0 :(得分:0)
我终于找到了问题。
这是关于:* ngIf =“selectedIndex == 2”。我用布尔值替换它,当我更改选项卡(MatTabChangeEvent)
时更新
tabChanged( tabChangeEvent: MatTabChangeEvent ): void {
this.selectedIndex = tabChangeEvent.index;
if (this.selectedIndex == 2) {
this.displayBlock = true;
}
else {
this.displayBlock = false;
}
}
答案 1 :(得分:-1)
(已关闭)和(已打开)方法。 最好添加类似下面的内容更好。
<mat-expansion-panel
#expPanel>
<mat-expansion-panel-header
(click)="changeActiveIndex(expPanel.expanded, i)">
</mat-expansion-panel-header>
</mat-expansion-panel>