自从 Angular 5 发布以来,我的垫子扩展面板出现了一些问题。它们是默认打开的,我不明白为什么。
my 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>
双向绑定在这里不是一个好主意。但现在,我遇到了另一个问题(单击下一步按钮没有执行任何操作)
我终于找到了问题所在。
这是关于这个:*ngIf =“selectedIndex == 2”。我将其替换为布尔值,当我更改选项卡时该布尔值会更新(MatTabChangeEvent)
tabChanged( tabChangeEvent: MatTabChangeEvent ): void {
this.selectedIndex = tabChangeEvent.index;
if (this.selectedIndex == 2) {
this.displayBlock = true;
}
else {
this.displayBlock = false;
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)