如何在悬停时有条件地将 css 应用到 mat-row 元素?

2024-03-21

我有一个包含行的表格,当满足特定条件(对于每行)时,背景颜色为浅红色。 对于每一行,在悬停时,我将背景更改为浅灰色。 问题是,我希望特殊行(那些已经获得浅红色的行)在悬停时用更深的红色着色(而不是像所有其他行一样为灰色)。

我能得到的最好结果是让红色行在悬停时将单个列着色为深红色,但该行的其余部分仍然涂成灰色。

.css(没有单列着色错误):

.cheaterRow {
  background-color: rgb(255, 130, 130);
}

.mat-row:hover{
  background-color:rgb(201, 201, 201);
}

.html:

<table
mat-table
[dataSource]="dataSource"
matSort
matSortActive="score"
matSortDirection="desc"
*ngIf="!loadingData; else loading"
class="row"
>
  <ng-container matColumnDef="id">
    <th mat-header-cell *matHeaderCellDef mat-sort-header 
 class="sortHeader">
        No.
    </th>
    <td mat-cell *matCellDef="let element">{{ element.id }}</td>
  </ng-container>

<ng-container matColumnDef="name">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
  <td mat-cell *matCellDef="let element">{{ element.name | titlecase }}</td>
</ng-container>

<ng-container matColumnDef="level">
  <th mat-header-cell *matHeaderCellDef>
    <mat-form-field>
      <mat-label>Level</mat-label>
      <mat-select (selectionChange)="onChangeLevel($event.value)">
        <mat-option>None</mat-option>
        <mat-option *ngFor="let level of levels" [value]="level.value">
          {{ level.value | titlecase }}
        </mat-option>
      </mat-select>
    </mat-form-field>
  </th>
  <td mat-cell *matCellDef="let element">
    {{ element.level | titlecase }}
  </td>
</ng-container>

<ng-container matColumnDef="score">
  <th mat-header-cell *matHeaderCellDef mat-sort-header>Score</th>
  <td mat-cell *matCellDef="let element">{{ element.score }}</td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr
  mat-row
  *matRowDef="let row; let even = even; columns: displayedColumns"
  [class.cheaterRow]="isCheater(row.id)"
></tr>
</table>

我希望整行在悬停时具有不同的颜色(取决于条件)。


通过在 css 中编写类,使用自定义条件在表中创建最后一个 tr(我的 css 类是正数、负数、取消、突出显示)

<tr 
     [ngClass]="{'positive' :(row.status?row.status===1:false) , 
      'negative' :(row.status?row.status===2:false)  ,
      'cancelled':(row.status?row.status===4:false),
      'highlight': selectedRowIndex == row}"

        mat-row *matRowDef="let row; columns: displayedColumns;">
 </tr>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在悬停时有条件地将 css 应用到 mat-row 元素? 的相关文章

随机推荐

  • Delphi 和 NoSQL

    有人曾经将 Delphi 与 NoSQL 数据库 如 Mongo CouchDB 或其他数据库 一起使用过吗 您会推荐哪一款 对于 Mongo 有TMongoWire https github com stijnsanders TMongo
  • .NET 和 Lotus Notes 互操作

    我在某个位置有 Lotus Notes 数据库文件 nsf 比方说 http intranet mycompany com somewhere data nsf http intranet mycompany com somewhere d
  • Excel 按名称将工作表数据拆分到新的 Excel 工作簿中[重复]

    这个问题在这里已经有答案了 Model Place model23 35372 model23 35372 model54 31034 model24 31034 model54 31034 model24 31034 我有这个Excel数
  • 如何转储哈希映射的内容?

    如何转储 Java HashMap 或任何其他 的内容 例如转储到 STDOUT 举个例子 假设我有一个具有以下结构的复杂 HashMap student1 gt Map name gt Tim Scores gt Map math gt
  • 如何更改 Treeview 的背景颜色

    我来这里是想问你如何更改树视图的背景 我尝试过 ttk Style configure Treeview background 383838 它仅适用于单元格 但树视图的其余部分保持白色 我尝试更改窗口的背景和框架 但它不起作用 那么 如何
  • 如何根据python中的条件组合或保留列表中的字符串?

    我有三个清单 li1 a a a a b b a a b li2 a a a b a b a a li3 b b a a b 我想通过以下方式 切片和粘贴 元素 b 结果应该是这样的 li1 aaaa b b aa b li2 aaa b
  • 将样式应用于特定类型的所有子元素

    我想为 wpf 编写一个样式 其中 StatusBar 中的所有按钮 具有定义的样式 都具有相同的样式 例如宽度 这是我的风格 以及元素的 xaml
  • 使用java进行服务器端推送

    有没有更简单的方法cometd http cometd org作为java的长轮询框架 因为我需要的是客户端指定一些参数并将它们发送到服务器 服务器处理它们并开始连续将消息推送回客户端 看起来 就像每个服务的线程 客户端接收消息并显示它们
  • 为多个客户管理多个 git 发布分支

    我的公司有一款软件出售给多个客户 但每个客户都有一些不同的要求 不仅仅是 把我们的标志放在这里 它们的核心都是相同的 但有些不需要某些模块 有些则需要所有模块 包括修改 我想在一个 git 存储库中管理所有这些 这样我对它们都有相同的核心
  • 从paleoView导入R中的netcdf时只有正纬度和经度可能是错误的投影

    我用的是古景 https onlinelibrary wiley com doi full 10 1111 ecog 03031软件用于下载过去气候的一些变量 包括 15000BP 10000BP 的平均温度 我可以根据要求上传文件 但至少
  • Android studio 找不到:com.getbase:floatingactionbutton:1.3.0

    我正在尝试使用现有的 android 项目运行我的 gradle 文件 我对这个应用程序的唯一错误是Failed to find com getbase floatingactionbutton 1 3 0 下面是我的 gradle 文件
  • 从 Angular Material 复选框更改 CSS

    有人可以告诉我 当您单击角度材质复选框时 如何更改圆形的颜色 如下图所示 粉色圆圈 这是官方网页的链接 https material angular io components checkbox overview https materia
  • Google 喜欢 Delphi 的编辑/组合控件吗?

    每个人可能都知道我的意思 但要澄清控制需要 当用户编辑文本时触发事件 该事件将提供一个 SuggestionList TStrings 您可以在其中填充匹配 建议 如果 SuggestionList 不为空 则会出现一个下拉菜单 与组合不同
  • Task.WhenAll 是否在后台线程并行运行任务

    以下2个代码片段的作用相同吗 1 var producer Task Run async gt await bar ReadDataAsync var consumer Task Run async gt await bar WriteDa
  • 如何使用 URL 打开应用程序?

    我已经实施了所有必需的事情 但没有成功 我想从浏览器打开应用程序 但不仅仅是网址架构就像 回调 一样 我有类似的东西 http 11 11 21 114 8081 signup callback signupCode 123 id 20 h
  • 将属性从 CAS 释放到 Spring security

    我在客户端使用 Spring security 3 X 在服务器上使用 CAS 4 0 当我进行 CAS Spring 安全集成时 我能够达到票证验证成功的水平 并能够在客户端获得适当的角色 但我在 casServiceValidation
  • 如何使用 QPainterPath 裁剪图像而不保存图像的其余部分

    我有一个 QPainterPath 我想裁剪一个 QPixmap 图像 这段代码对我有用 但我想使用 PyQt5 内置功能 就像没有 numpy 的 mask read image as RGB and add alpha transpar
  • 如何仅将 font-face 应用于特定范围的 Unicode 字符

    从数据库查询的字符串如下所示 123 Street National Road 3 我用的是字体font family Battambang cursive 使用该字体的 ASCII 字符看起来不错 但字符串中的其他字符看起来有点麻烦 在浏
  • 如何将字符串设置为全部小写[重复]

    这个问题在这里已经有答案了 我有一个char foo SIZE string 并使用正确输入 s 如其中printfs正确的输入 但现在想将其设置为小写 所以我尝试使用 if isupper foo foo tolower foo 即当我这
  • 如何在悬停时有条件地将 css 应用到 mat-row 元素?

    我有一个包含行的表格 当满足特定条件 对于每行 时 背景颜色为浅红色 对于每一行 在悬停时 我将背景更改为浅灰色 问题是 我希望特殊行 那些已经获得浅红色的行 在悬停时用更深的红色着色 而不是像所有其他行一样为灰色 我能得到的最好结果是让红