英文:
How to assign different colour to mat-row in angular?
问题
以下是翻译好的内容：
在这里的情况是我想根据一些逻辑（例如列表的 orderId）为 mat 表的每一行分配颜色。对于 orderId <= 1000，颜色应为红色；对于 1000 < orderId <= 2000，颜色应为绿色；对于 orderId > 2000，颜色应为黄色。我尝试了以下方法，但无法实现期望的输出：
<mat-row *matRowDef="let row; columns: displayedColumns"
(click)="highlightedRows.push(row)"
[style.background]="highlightedRows.indexOf(row) != -1 ? backgroundColor : ''">
</mat-row>
将不胜感激地接受任何帮助。
英文:
The case here is I want to assign colour to each row of mat table based on some logic (for e.g orderId of the list) for orderId <= 1000 colour should be red, for 1000 < orderId <= 2000, colour should be green and orderId > 2000, colour should be yellow. I tried this but unable to achieve the desired output:
<mat-row *matRowDef="let row; columns: displayedColumns"
(click)="highlightedRows.push(row)"
[style.background]="highlightedRows.indexOf(row) != -1 ? backgroundColor : ''">
</mat-row>
Any help will be appreciated.
答案1
得分: 1
<mat-row *matRowDef="let row; columns: displayedColumns; let i = index"
[style.background]="getBackgroundColour(i)">
</mat-row>
getBackgroundColour(i) {
if(i <= 1000) {
return 'red'
}
if(i <= 2000) {
return 'green'
}
if(i > 2000) {
return 'yellow'
}
}
英文:
<mat-row *matRowDef="let row; columns: displayedColumns; let i = index"
[style.background]="getBackgroundColour(i)">
</mat-row>
getBackgroundColour(i) {
if(i <= 1000) {
return 'red'
}
if(i <= 2000) {
return 'green'
}
if(i > 2000) {
return 'yellow'
}
}
答案2
得分: 0
Call a function in HTML:
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="highlightedRows.push(row)" [style.background]="setBgColor(row.orderId)"></mat-row>
And in your TypeScript, you can add a function:
setBgColor(orderId: number){
if(orderId <= 1000){
return "#ff0000";
}
else if(orderId <= 2000 && orderId > 1000){
return "#008000";
}
return "#ffff00";
}
英文:
Call a function in html
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="highlightedRows.push(row)" [style.background]="setBgColor(row.orderId)"></mat-row>
and in your ts you can add a function
setBgColor(orderId: number){
if(orderId <= 1000){
return "#ff0000";
}
else if(orderId <= 2000 && orderId > 1000){
return "#008000";
}
return "#ffff00";
}
答案3
得分: 0
你可以使用ngClass来实现这个。这将需要创建带有所需颜色的CSS类。
然后在此之后，您需要执行以下操作：
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="highlightedRows.push(row)"
[ngClass]="{'redClass': row.orderId <= 1000, 'greenClass': row.orderId > 1000 && row.orderId <= 2000, 'yellowClass': row.orderId > 2000}">
来源：https://stackoverflow.com/questions/44821875/multiple-conditions-in-ngclass-angular-4
英文:
You can use ngClass for this. This will require to make css classes with the required color.
Then after this you need to do:
<mat-row *matRowDef="let row; columns: displayedColumns" (click)="highlightedRows.push(row)"
[ngClass]="{'redClass': row.orderId <= 1000, 'greenClass': row.orderId > 1000 && row.orderId <= 2000, 'yellowClass': row.orderId > 2000}">
Source: https://stackoverflow.com/questions/44821875/multiple-conditions-in-ngclass-angular-4
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论