Question

我正在寻找一种在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

Answer 1

更新新材料版本（md - ＆gt; 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，就会应用该类。

Plunker demo

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 */
}

TS：

selectedRowIndex: number = -1;

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

Answer 2

在table overview examples页面中，他们解释了SelectionModel处理选择的问题 - 顺便提一下，它还可以处理多项选择。

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

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

如果您的背景颜色太暗，您需要自己添加样式以反转文字颜色。

要处理选择，请使用onChange的{{1}}事件。

selection

或者，所选项目位于// 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能够针对此类常见案例进行改进，而且他们不会将所有内容都留给开发人员。对于选择模型，可以自动处理键盘事件等事情。

Answer 3

我的表数据中没有像id列这样的唯一标识符，但这对我有用（材料6）：

HTML

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

向TS添加变量

selectedRow;

（S）CSS

.selected {
  background-color: red;
}

如果您想在选择行时不仅要做样式，还可以将(click)="selectedRow = row"替换为(click)="selectRow(row)"，然后将此功能添加到ts中：

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

Answer 4

所以，我也遇到了这个问题。我正在使用更新的垫子 - ＆＃39;而不是＆＃39; md - ＆＃39;，但我认为这将是一样的......

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

我没有在任何地方找到它，我只是尝试过它并且碰巧运行了，所以我希望这是对的。最重要的是标记＆＃39;让进入＆＃39;到其他matRowDef的结尾。对不起，我来晚了这么晚。希望这对某人有好处。

Answer 5

对于材料”：“ ^ 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;
}

Answer 6

基于Zuzzie的答案（这是最适合我的解决方案），我执行了以下操作：

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）CSS

.selected {
  background-color: red;
}

Answer 7

如果先前未选择该行，则可以选择多行；再次单击该行将取消选择该行。

HTML

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

Angular 4 Material表突出显示一行

7 个答案: