Html 交替行颜色角材料表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47051235/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Alternate row colours angular material table
提问by Ben Clarke
I am wondering how I target the even/odd rows inside a Angular Material Tableso that I can set the even/odd rows a different background colour.
我想知道如何定位 a 中的偶数/奇数行，Angular Material Table以便我可以将偶数/奇数行设置为不同的背景颜色。
I setup my ClaimFileHistoryDataSourceclass:
我设置了我的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() {}
}
On NgInitI make a call to my service to go and get the data I need and populate the DataSource:
在NgInit我打电话给我的服务去获取我需要的数据并填充DataSource：
this._claimFileHistoryService.getClaimFileHistoryById().subscribe(response => {
this.claimClientInformation = response;
this.dataSource = new ClaimFileHistoryDataSource(this.claimClientInformation);
});
This is fine and the Data is coming back as it should.
这很好，数据会按原样返回。
In the HTML the Mat-Tablelooks like this:
在 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>
Again I was wondering how do I go about getting the Odd/Even rows of the table and setting them a different row background colour?
我再次想知道如何获取表格的奇数/偶数行并将它们设置为不同的行背景颜色？
回答by mohit uprim
Use Following CSS in your .css or .scss file to set the different style for even/odd row:
在 .css 或 .scss 文件中使用以下 CSS 为偶数/奇数行设置不同的样式：
.mat-row:nth-child(even){
background-color:red;
}
.mat-row:nth-child(odd){
background-color:black;
}
回答by Gustavo Lopes
Updating this answer with a newer approach to future developers who may come to this question.
使用更新的方法更新此答案，以供将来可能遇到此问题的开发人员使用。
Material Angular now offers some variables to row indexes.
Material Angular 现在为行索引提供了一些变量。
<mat-row *matRowDef="
let row;
let even = even;
columns: displayedColumns;"
[ngClass]="{gray: even}"></mat-row>
In you CSS file: .gray { background-color: #f5f5f5 }
在你的 CSS 文件中： .gray { background-color: #f5f5f5 }
There are other properties like: index, count, first, last, evenand odd.
还有像其他的属性：index，count，first，last，even和odd。
You can find out more on Angular Docs, more specifically on section "Table showing each row context properties"
您可以在Angular Docs上找到更多信息，更具体地说，在“显示每行上下文属性的表”部分
回答by Hameed Syed
You can apply colors to rows based on condition as well.
您也可以根据条件将颜色应用于行。
For an instance if the cell value is equal to 100,then change the color of the row to red.
例如，如果单元格值等于 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
css
.rowStyle{
background-color:red;
font-weight: bold;
}
Above scenario will work if your columns have myColumn as one of the columns.
Also using even property you can apply the required color styling [ngClass]="{rowcolor: even}
如果您的列将 myColumn 作为列之一，则上述方案将起作用。同样使用 even 属性，您可以应用所需的颜色样式[ngClass]="{rowcolor: even}
