Альтернативные цвета строк angular таблица материалов
Мне интересно, как я нацеливаю четные/нечетные строки внутри Angular Material Table
, чтобы я мог установить четные/нечетные строки другого цвета фона.
Я настраиваю класс ClaimFileHistoryDataSource
:
claimClientInformation: ClaimFileHistory[];
dataSource : ClaimFileHistoryDataSource;
displayedColumns = ['TypeImg', 'Description', 'Agent'];
export class ClaimFileHistoryDataSource extends DataSource<ClaimFileHistory> {
constructor(private _claimFileHistory: ClaimFileHistory[]) {
super();
}
connect(): Observable<ClaimFileHistory[]> {
return Observable.of(this._claimFileHistory);
}
disconnect() {}
}
В NgInit
я звоню в свою службу, чтобы пойти и получить нужные мне данные, и заполнить DataSource
:
this._claimFileHistoryService.getClaimFileHistoryById().subscribe(response => {
this.claimClientInformation = response;
this.dataSource = new ClaimFileHistoryDataSource(this.claimClientInformation);
});
Это нормально, и данные возвращаются как следует.
В HTML Mat-Table
выглядит так:
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="TypeImg">
<mat-cell *matCellDef="let row"><img [src]='row.TypeImg' height="40px"></mat-cell>
</ng-container>
<ng-container matColumnDef="Description">
<mat-cell *matCellDef="let row">
<div>
<span class="d-block">{{row.Description}}</span>
<span class="d-block">{{row.Date}}</span>
</div>
</mat-cell>
</ng-container>
<ng-container matColumnDef="Agent">
<mat-cell *matCellDef="let row"> {{row.Agent}} </mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
<mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
Снова я задавался вопросом, как мне заняться получением строк Odd/Even таблицы и установкой их другого цвета фона строки?
Ответы
Ответ 1
Используйте Follow CSS в вашем файле .css или .scss, чтобы установить другой стиль для четной/нечетной строки:
.mat-row:nth-child(even){
background-color:red;
}
.mat-row:nth-child(odd){
background-color:black;
}
Ответ 2
Обновление этого ответа с более новым подходом к будущим разработчикам, которые могут прийти к этому вопросу.
Материал Angular теперь предлагает некоторые переменные для индексов строк.
<mat-row *matRowDef="
let row;
let even = even;
columns: displayedColumns;"
[ngClass]="{gray: even}"></mat-row>
В вашем CSS файле: .gray { background-color: #f5f5f5 }
Есть и другие свойства, такие как: index
, count
, first
, last
, even
и odd
.
Вы можете узнать больше об Angular Docs, более конкретно в разделе "Таблица, показывающая свойства контекста каждой строки"
Ответ 3
Вы также можете применять цвета к строкам в зависимости от условий.
Например, если значение ячейки равно 100, измените цвет строки на красный.
<tr class="matheader-row" mat-row *matRowDef="let row; columns: displayColumns;
let i = index; let even = even;" [class.rowStyle]="row['myColumn']=='100'"
[ngClass]="{rowcolor: even}">
</tr>
CSS
.rowStyle{
background-color:red;
font-weight: bold;
}
Выше сценарий будет работать, если ваши столбцы имеют myColumn в качестве одного из столбцов. Также используя свойство even, вы можете применить требуемый стиль цвета [ngClass]="{rowcolor: even}