我想在展开时更改 mat 扩展面板标题的内容,并在折叠时返回到以前的状态。
<mat-expansion-panel>
<mat-expansion-panel-header>
<div>{{'my name is joe'}}</div>
<div>{{'i am 20 years old'}}</div>
// when expanded i want to hide the second div and change
// the style of first div margin, padding e.t.c
</mat-expansion-panel-header>
// ....
</mat-expansion-panel>
您可以使用
模板变量和mat-expansion-panel
的属性expanded
,如下所示:
模板
<mat-expansion-panel #panel>
<mat-expansion-panel-header>
<div [ngClass]="{'first-div': panel.expanded}">Always shown</div>
<div *ngIf="!panel.expanded">Not shown when expanded</div>
</mat-expansion-panel-header>
Content here
</mat-expansion-panel>
.CSS
.first-div {
background-color: red;
}
更新了堆栈闪电战,在展开时隐藏第二个div
并将 CSS 类应用于第一个。