时间戳

首页 > 解决方案 > 在 Angular/HTML 中单击时更改元素的文本？

html - 在 Angular/HTML 中单击时更改元素的文本？

问题描述

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

标签： htmlangulartypescriptangular-material

解决方案

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

看看 StackBlitz

推荐阅读