Angular Material: 扩展面板展开时更改面板标题

Question

我想知道是否可以在面板展开时更改面板标题（多个扩展面板之一）。 当标题太长时它会很有用。

例如：我作为标题使用"Hello..." 展开后将是 "Hello everybody"

我试过打开和关闭的东西，但它同时改变了我的每一个标题。

非常感谢！

Answer 1

最简单的方法是使用模板逻辑。将模板引用变量应用于扩展面板并使用它来获取扩展状态以改变标题文本：

<mat-expansion-panel #thisPanel>
  <mat-expansion-panel-header>
    <mat-panel-title>

      {{ thisPanel.expanded ? 'Hello everybody' : 'Hello...' }}

    </mat-panel-title>
    ...
  </mat-expansion-panel-header>
  ...
</mat-expansion-panel>