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

Question

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

我的垫子行

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

The problem: After click in some row, the background change to red (this is OK) but after click on other row, the preview (red) row, lost thei background color.

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

Answer 1

Angular Material 组件有问题，它们被包装在多种样式中 classes 并且很难覆盖它。尽管有一些解决方案我发现了如何覆盖 mat-* 样式。我会给你一个例子：

1。在全局 style.css 文件

中定义样式 class

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

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

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

定义样式 class

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

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

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

3。使用自定义样式class 不封装视图

首先你需要在你的组件中设置封装parameter/flag。示例：

@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 组件编写自己的样式 classes。可能 Material 组件看起来不像以前那样（真正的 Material 组件）

It's not an exact solution for your problem, but direction for finding your own solution

Answer 2

Ivan，您不能使用唯一变量，您需要使用数组或新的属性元素。假设您将这个新变量称为 "selected"

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

看到您的 "elements" 罐头具有 table

中未显示的属性

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

Angular 8 Material table highlight a row on click and kep the background color after click on other row

css

angularjs

angular

mat-table

1。在全局 style.css 文件

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

3。使用自定义样式class 不封装视图