改变角材质表中选中“td”样式的方法答案

【问题标题】：Way to change the style of the selected "td" in the angular material table改变角材质表中选中“td”样式的方法
【发布时间】：2019-03-25 14:57:58
【问题描述】：

我正在尝试更改角材料表中“td”的样式，当它被点击时。样式可以是背景颜色、内边距之类的东西。

我尝试在“td”元素上包含（单击）。但是，它不起作用。

<table mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="name">
        <td mat-cell *matCellDef="let element" class="userlist" (click)="this.style.backgroundColor = 'red';"><span><strong>{{element.name}}</strong></span> <br/>
         </td>
      </ng-container>

      <tr mat-row *matRowDef="let element; columns: displayedColumns;"></tr>
    </table>

【问题讨论】：

你能制作一个stackblitz之类的吗？重现它以便我们可以调试它
@srikha 请查看我的回答，如果有任何更改建议。谢谢。

标签： angular uitableview angular-material

【解决方案1】：

要更改mat-row 的样式，您需要覆盖全局style.css 中的.mat-row，如下所示。

.basic-container .mat-row  {
  background-color: yellow;
  padding:5px;
 /* add more style to customize */
}

Here is solution on stackblitz

希望这会有所帮助！

【讨论】：

当在表格中单击该特定元素时，我必须对 css 进行一些更改。

【解决方案2】：

将tabindex="1" 添加到mat-cell

<mat-cell tabindex="1" *matCellDef="let element">
                    {{element[column.name]}}
                </mat-cell>

现在，点击样式可以通过以下方式可见

mat-row.mat-row.ng-star-inserted mat-cell:active,
mat-row.mat-row.ng-star-inserted mat-cell:focus {
  background: tomato;
  color: white;
}

Stackblitz Demo showing change in td color when clicked

【讨论】：