Thay đổi phông màu của ô cụ thể trong mat-table (Angular)

Alechandro

New Member
#1
Mình có vấn đề với bảng. Mình cần phải thay đổi phông màu của ô cụ thể trong bảng.

uuKYV.png
Có nghĩa là mình sẽ có thể thay đổi màu cho ô có giá trị như: "số 8". Mình cố gắng thay đổi màu sắc, nhưng chỉ thay đổi được màu của cột (màu xanh dương).

XOhbx.png

Code .html của mình như sau:
Mã:
<div class="my_item">
        <div><span class="skuska"><span class="mat-subheading-2">Január</span></span></div>
        <mat-table #table [dataSource]="dataSource" matSort>
          <ng-container matColumnDef="{{column.id}}" *ngFor="let column of columnNames">
            <mat-header-cell *matHeaderCellDef mat-sort-header> {{column.value}} </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element[column.id]}} </mat-cell>
          </ng-container>

          <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
          <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
        </mat-table>
      </div>
Code .css:
Mã:
.mat-header-cell.cdk-column-ne.mat-column-ne.ng-star-inserted{
  color:blue;

}

.mat-cell.cdk-column-ne.mat-column-ne.ng-star-inserted{
  color:blue;

}
Cám ơn các bạn.
 

mHelpMe

New Member
#2
Bạn có thể thêm thuộct tính style color cho HTML của bạn:
Mã:
<mat-cell *matCellDef="let element" [style.color]="getColor(column.value)"> {{element[column.id]}} </mat-cell>
Trong class của bạn, thêm phương thức:
Mã:
getColor(value) {
   if(value === '1' || value === '6') //For whatever cell color you need to change according to the value
      return "blue";
}
Good luck.
 

Whiz

New Member
#3
Bạn có thể thêm thuộct tính style color cho HTML của bạn:
Mã:
<mat-cell *matCellDef="let element" [style.color]="getColor(column.value)"> {{element[column.id]}} </mat-cell>
Trong class của bạn, thêm phương thức:
Mã:
getColor(value) {
   if(value === '1' || value === '6') //For whatever cell color you need to change according to the value
      return "blue";
}
Good luck.
Hay đơn giản bạn có thể dùng:
Mã:
[style.color]="'1' === value || '6' === value ? 'blue' : 'black'"
 
Top