Question

单击时，我试图更改角度材质表中“ 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>

Answer 1

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

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

Here is solution on stackblitz

希望这会有所帮助！

Answer 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

更改角度材料表中所选“ td”样式的方法

2 个答案: