角4材质表突出显示一行

我正在寻找一个很好的方式来突出整个行在 md-table。
我应该做指令还是什么？

<div class="example-container mat-elevation-z8">
<md-table #table [dataSource]="dataSource">


<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->


<!-- ID Column -->
<ng-container cdkColumnDef="userId">
<md-header-cell *cdkHeaderCellDef> ID </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.id}} </md-cell>
</ng-container>


<!-- Progress Column -->
<ng-container cdkColumnDef="progress">
<md-header-cell *cdkHeaderCellDef> Progress </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.progress}}% </md-cell>
</ng-container>


<!-- Name Column -->
<ng-container cdkColumnDef="userName">
<md-header-cell *cdkHeaderCellDef> Name </md-header-cell>
<md-cell *cdkCellDef="let row"> {{row.name}} </md-cell>
</ng-container>


<!-- Color Column -->
<ng-container cdkColumnDef="color">
<md-header-cell *cdkHeaderCellDef>Color</md-header-cell>
<md-cell *cdkCellDef="let row" [style.color]="row.color"> {{row.color}} </md-cell>
</ng-container>


<md-header-row *cdkHeaderRowDef="displayedColumns"></md-header-row>
<md-row *cdkRowDef="let row; columns: displayedColumns;"></md-row>
</md-table>
</div>

表格来自: https://material.angular.io/components/table/overview

105650 次浏览
小开
最佳答案

更新资料版本(md-> mat) :

Html:

<!-- Add the highlight class in row definiton of md-table -->
<!-- Add click event to pass the selected row index -->


<mat-row *cdkRowDef="let row; columns: displayedColumns;"
[ngClass]="{'highlight': selectedRowIndex == row.id}"
(click)="highlight(row)">
</mat-row>

原答案:

您可以通过使用 ngClass和类似于 selectedRowIndex的标志来完成。当单击的行索引等于 selectedRowIndex时，将应用该类。

普朗克演示

Html:

<!-- Add the highlight class in row definiton of md-table -->
<!-- Add click event to pass the selected row index -->


<md-row *cdkRowDef="let row; columns: displayedColumns;"
[ngClass]="{'highlight': selectedRowIndex == row.id}"
(click)="highlight(row)">
</md-row>

Css:

.highlight{
background: #42A948; /* green */
}

总结:

selectedRowIndex = -1;


highlight(row){
this.selectedRowIndex = row.id;
}
小开

所以，我也遇到了这个问题。我用的是新的‘ mat-’而不是‘ md-’，但我猜它们大概是一样的... ..。

<mat-row
*matRowDef="let row; columns: myColumns; let entry"
[ngClass]="{ 'my-class': entry.someVal }">
</mat-row>

我哪儿都没找到，我只是试了试，碰巧成功了，所以我希望这是对的。最重要的是在 matRowDef 的其他内容的末尾标记“ let entry”。抱歉我来晚了。希望这能帮到什么人。

小开

在 表格概述示例页面中，他们解释了用于处理选择的 SelectionModel——顺便说一句，它也处理多重选择。

selection是在组件中定义的 SelectionModel。我找不到任何实际的文档，但是 实施非常简单。

selection = new SelectionModel<CustomerSearchResult>(false, null);

第一个参数是 allowMultiSelect，因此为了允许同时选择多个项，将其设置为 true。如果为 false，则在设置新值时，选择模型将取消选择任何现有值。

然后，向 select()行添加一个 click 事件，并为选中该行时创建自己的 css 类。

   <mat-table>
...


<mat-row *matRowDef="let row; columns: displayedColumns;"
[ngClass]="{ 'selected': selection.isSelected(row)}"
(click)="selection.select(row)"></mat-row>


</mat-table>

我添加的 css 类如下(示例中还没有提到样式) ，然后您只需要添加到您的 css 中

.mat-row {
min-height: 65px;


&.selected {
background: #dddddd;
}
}

如果你的背景颜色太暗，你需要自己添加样式来反转文本颜色。

要处理选择，请使用 selection的 onChange事件。

    // selection changed
this.selection.onChange.subscribe((a) =>
{
if (a.added[0])   // will be undefined if no selection
{
alert('You selected ' + a.added[0].fullName);
}
});

或者，选择的项目在 this.selection.selected中。

我希望 mat-table能够针对这种常见的情况得到改进，而不是把一切都交给开发人员。比如键盘事件等等，如果能够根据选择模型自动处理就更好了。

小开

我在表格数据中没有像 id 列这样的唯一标识符，但这对我很有用(材料6) :

超文本标示语言

 <tr mat-row *matRowDef="let row; columns: displayedColumns"
(click)="selectedRow = row" [ngClass]="{ 'selected': row === selectedRow }">
</tr>

或 HTML，如果您想让用户在另一次单击时取消选择

 <tr mat-row *matRowDef="let row; columns: displayedColumns"
(click)="selectedRow = selectedRow === row ? null : row" [ngClass]="{ 'selected': row === selectedRow }">
</tr>

给 TS 增加变量

selectedRow;

(S)社会福利署

.selected {
background-color: red;
}

如果你想在选择一行时做更多的事情而不仅仅是样式化，那么用 (click)="selectRow(row)"替换 (click)="selectedRow = row"，并将这个函数添加到你的 ts:

selectRow(row) {
this.selectedRow = row;
// more stuff to do...
}
小开

材料: “ ^ 7.0.3”,

在 html 中使用 css 名称，不使用单引号，以突出显示该行

 .mat-row.highlighted {
background: lightblue;
}




<tr mat-row *matRowDef="let row; columns: displayedColumn;"
[ngClass]="{highlighted: selectedRowIndex == row.id}"  (click)="highlight(row)" >
</tr>




highlight(row){
this.selectedRowIndex = row.id;
}
小开

基于苏西的回答(这是对我最有效的解决方案) ，我做了以下事情:

HTML:

<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="onRowClicked(row)" [ngClass]="{ 'selected': row === selectedRow }">
</mat-row>

向 TS 添加变量:

selectedRow : boolean;

将此功能添加到 TS:

onRowClicked(row) {


if(!this.selectedRow)
{
this.selectedRow = row;
}
else
{
this.selectedRow = row;
}


}

(S)社会福利署

.selected {
background-color: red;
}
小开

这将允许您选择多个行，如果该行以前没有被选中，并在再次单击时将取消选中它。

超文本标示语言

<mat-row *matRowDef="let row; columns: displayedColumns;"
(click)="findOut(row)"[style.background]="highlightedRows.indexOf(row) != -1 ? 'lightgrey' : ''"></mat-row>

打字脚本

创建一个数组

highlightedRows = [];

定义 findOut 函数

findOut(row){
if(this.highlightedRows.indexOf(row) === -1){
this.highlightedRows.push(row);
}
else{
    

this.highlightedRows[this.highlightedRows.indexOf(row)] = -1;
}
    

}
小开

我对所有的项目都有相同的要求，并且我已经创建了这个指令:

import { Directive, ElementRef, HostListener, Input } from "@angular/core";
 

@Directive({
selector: '[toggleActiveStyle]'
})
export class ToggleActiveStyleDirective {
prevElement: HTMLElement;
 

@Input() addActiveCSSClass: boolean;
 

constructor(private el: ElementRef) {}
 

@HostListener('click') onClick () {
setTimeout(() => {
for(let i = 0; i < this.el.nativeElement.parentElement.children.length; i++) {
this.el.nativeElement.parentElement.children[i].style.background = '';
}
if(this.addActiveCSSClass) {
this.el.nativeElement.style.background = 'white';
}
else {
this.el.nativeElement.style.background = '#cccccc';
}
});
}
}

在 HTML 中添加:

并在组件中可以设置: addBg = true/false;


提交答案