angular - 在扩展模式下如何更改垫子扩展面板标题的内容
问题描述
我想在展开时更改垫子扩展面板标题的内容,并在折叠时返回之前的状态。
<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>
解决方案
您可以使用模板变量和类似这样的expanded
属性mat-expansion-panel
:
模板
<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;
}
更新了在展开时隐藏第二个并将 CSS 类应用于第一个的stackblitz 。div
推荐阅读
- amazon-web-services - 尽管状态为“正在运行”,但 EC2 实例仍无法正常工作
- javascript - ES6 类构造
- arrays - Presto - 按特定值拆分数组
- c# - 无法获得此 AdaptiveCard.FromJson
- javascript - 如何强制桌面浏览器以移动模式打开
- r - 使用 r 中的 plotly() 从条形图中隐藏 y 轴线
- javascript - 如何从角度6中的url中删除#
- azure - Yii2 框架到 Azure Web 应用程序(404 页面未找到)
- cassandra - 使用 Cassandra 获得最新的独特结果
- django-rest-framework - 接收到一个 POST 请求时是否可以向外部 API 发送一个 POST 请求?