在 Angular/HTML 中单击时更改元素的文本？ [关闭]

【问题标题】：Changing the text of an element on click in Angular/HTML? [closed]在 Angular/HTML 中单击时更改元素的文本？ [关闭]
【发布时间】：2020-11-13 07:30:57
【问题描述】：

我有一个带垫子扩展板的垫子手风琴。单击垫子扩展面板后，我希望文本带有下划线。因此，当展开面板打开时，标题会带有下划线，而当它关闭时，下划线会消失。有没有一种简单的方法可以根据 Angular/HTML 中元素的状态来更改文本？

【问题讨论】：

你可以简单地使用样式表 :) 但为了更准确，你应该添加更多关于你的解决方案的细节，所以显示你的代码

标签： html angular typescript angular-material

【解决方案1】：

html 文件可能如下所示：

<mat-expansion-panel [(expanded)]="expanded">
    <mat-expansion-panel-header >
        <mat-panel-title [ngClass]="{'underlined': expanded}" >Title</mat-panel-title>
    </mat-expansion-panel-header>
</mat-expansion-panel>

在您的打字稿文件中定义相应的字段

expanded = false;

并在 css/scss 文件中定义相应的类：

.underlined {
  text-decoration: underline;
}

look at it at StackBlitz

【讨论】：