垫子扩展面板是默认打开的bug? [英] Mat expansion panel is opened by default bug?
问题描述
自从 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>
在我的组件中
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-expansion-panel></mat-tab-group>
这里的双向绑定不是一个好主意.但是现在,我有另一个问题(单击 nextStep 按钮不执行任何操作)
我终于找到了问题.
是关于这个的:*ngIf="selectedIndex == 2".我用一个布尔值替换它,当我更改选项卡时更新它(MatTabChangeEvent)
tabChanged( tabChangeEvent: MatTabChangeEvent ): void {this.selectedIndex = tabChangeEvent.index;如果(this.selectedIndex == 2){this.displayBlock = true;}别的 {this.displayBlock = false;}}
Since Angular 5 release, I have some problem with my mat expansion panels. They are opened by default and I don't understand why.
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>
in my component
tabChanged(tabChangeEvent: MatTabChangeEvent): void {
this.selectedIndex = tabChangeEvent.index;
}
onOpened(i) {
this.expansionPanelIndex = i;
}
onClosed(i) {
this.expansionPanelIndex = -1;
}
EDIT : I updated Material to 5.1.1 same problem EDIT 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>
The two way binding wasn't a good idea here. But now, I have another problem (click on nextStep button doesn't do anything)
I finally found the problem.
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;
}
}
这篇关于垫子扩展面板是默认打开的bug?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!