Angular 8 Material 表在单击时突出显示一行并在单击其他行后保留背景颜色

Posted 2023-03-06

【中文标题】Angular 8 Material 表在单击时突出显示一行并在单击其他行后保留背景颜色

【英文标题】：Angular 8 Material table highlight a row on click and kep the background color after click on other row

【发布时间】：2020-09-22 22:39:40

【问题描述】：

在点击另一行后，我寻找一种简单的方法来保存一行的颜色

我的垫子行

 <tr mat-row *matRowDef="let row; columns: ['favicon', 'name', 'quality', 'created_at', 'report', 'edit']" 
 (click)="selectedRow = selectedRow === row ? null : row" [ngClass]=" 'selected': row === selectedRow "> 

.ts

selectedRow

css

.selected 
  background-color: red!important;


.mat-row:nth-child(even)
    background-color: #e4f0ec;


.mat-row:nth-child(odd)
    background-color:#ffffff;

问题：点击某行后，背景变为红色 （这没关系）但是点击其他行后，预览（红色）行失去了背景颜色。

预期结果： 所有点击的行都需要保存红色，或者甚至更好 - 获得一些其他颜色（以产生差异 - 行 - 选定的行 - 访问的行）。

【参考方案1】：

Angular Material 组件的问题是它们被包装在许多样式类中并且很难覆盖它。虽然有一些解决方案我发现了如何覆盖mat-* 样式。我给你举个例子：

1。在全局 style.css 文件中定义样式类

首先，您需要发现哪些类用于您的操作。可以使用 Google Chrome 中的开发工具或其他工具来完成。 然后在全局样式文件（style.css 或 style.scss...）中定义该类样式。即（我的情况）：

.mat-focused .mat-form-field-label, .mat-datepicker-toggle 
    color: white !important;
 

---

2。使用 ::ng-deep 或 >>>

定义样式类

（已弃用） 在您的组件样式类中使用 ::ng-deep 或 >>> 前缀定义相同的已发现 mat-* 样式类。即（我的情况）：

::ng-deep .mat-focused .mat-form-field-label, .mat-datepicker-toggle 
    color: white !important;

虽然此解决方案已被弃用，但我没有找到替代方案来覆盖组件样式文件中的样式。

---

3。使用没有视图封装的自定义样式类

首先，您需要在组件中设置封装参数/标志。示例：

@Component(
  selector: 'app-my-element',
  templateUrl: './my-element.component.html',
  styleUrls: ['./my-element.component.scss'],
  encapsulation: ViewEncapsulation.None
)
export class MyElementComponent implements OnInit 
  ...

然后您可以为 Angular Material 组件编写自己的样式类。 可能是 Material 组件看起来不像以前（真正的 Material 组件）

---

这不是针对您的问题的精确解决方案，而是找到您自己的解决方案的方向

【参考方案2】：

Ivan，您不能使用唯一变量，您需要使用数组或元素的新属性。想象一下，您将这个新变量称为“已选择”

<tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
      [class.selected]="element.selected"
      (click)="element.selected= !element.selected">
</tr>

查看您的“元素”可以具有未显示在表格中的属性