Angular 在展开模式下如何更改mat扩展面板标题的内容

我想在展开时更改mat expansion panel标题的内容，并在折叠时恢复到以前的状态

<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>

{{我叫乔}}
{{‘我20岁了’}
//展开时，我想隐藏第二个div并进行更改
//第一个div边距的样式，填充e.t.c
// ....

您可以使用模板变量和

mat扩展面板的属性
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>

已更新，在展开时隐藏第二个
div
，并将CSS类应用于第一个类

.first-div {
  background-color: red;
}