问题描述
限时送ChatGPT账号..您好,我有一个 Angular 应用程序,可以实时显示在调度程序引擎中运行的进程的状态.我有下表来显示这些进程:
我想要的是根据状态动态更改行背景颜色,如下所示:
<块引用>S(开始)-白色;
W(工作)-蓝色;
E(错误)-红色;
F(完成)-绿色;
HTML
<div class="example-element-detail";[@detailExpand]=元素 == 扩展元素?'展开' : '折叠'";*ngIf=log_message"><div class="example-element-description"><p *ngIf=this.log_message">日志消息:</p><p *ngIf=!this.log_message">N/A</p><pre *ngIf=this.log_message">{{ this.log_message }} </pre></td></ng-容器><ng-container matColumnDef=UPD_DATE"><th mat-header-cell *matHeaderCellDef>UPD_DATE </th><td mat-cell *matCellDef=让数据">{{data.LAST_UPD_DATETIME}} </td></ng-容器><ng-container matColumnDef=S"><th mat-header-cell *matHeaderCellDef>s </th><td mat-cell *matCellDef=让数据">{{data.STATUS}} </td></ng-容器><ng-container matColumnDef=PROC"><th mat-header-cell *matHeaderCellDef>PROC </th><td mat-cell *matCellDef=让数据">{{data.PROC_ID}} </td></ng-容器><ng-container matColumnDef=AGENT"><th mat-header-cell *matHeaderCellDef>代理</th><td mat-cell *matCellDef=让数据">{{data.AGENT_ID}} </td></ng-容器><ng-container matColumnDef="SUBMIT_DATE"><th mat-header-cell *matHeaderCellDef>SUBMIT_DATE </th><td mat-cell *matCellDef=让数据">{{data.SUBMIT_DATE}} </td></ng-容器><ng-container matColumnDef="END_DATE"><th mat-header-cell *matHeaderCellDef>END_DATE </th><td mat-cell *matCellDef=让数据">{{data.END_DATE}} </td></ng-容器><ng-container matColumnDef=START_DATE"><th mat-header-cell *matHeaderCellDef>START_DATE </th><td mat-cell *matCellDef=让数据">{{data.START_DATE}} </td></ng-容器><ng-container matColumnDef=USER_SUBMIT"><th mat-header-cell *matHeaderCellDef>USER_SUBMIT </th><td mat-cell *matCellDef=让数据">{{data.USER_SUBMIT}} </td></ng-容器><ng-container matColumnDef=THREAD_NUM"><th mat-header-cell *matHeaderCellDef>THREAD_NUM </th><td mat-cell *matCellDef=让数据">{{data.THREAD_NUM}} </td></ng-容器><ng-container matColumnDef=INSTANCE_ID"><th mat-header-cell *matHeaderCellDef>INSTANCE_ID </th><td mat-cell *matCellDef=让数据">{{data.INSTANCE_ID}} </td></ng-容器><ng-container matColumnDef="START"><th mat-header-cell *matHeaderCellDef>开始</th><td mat-cell *matCellDef="let row"><button class="btn btn-success";(点击)=onStart(行)";[disabled]=this.started">Start</button></td></ng-容器><ng-container matColumnDef=STOP"><th mat-header-cell *matHeaderCellDef>停止</th><td mat-cell *matCellDef="let row"><button class="btn btn-danger";(click)=onStop()">停止</button></td></ng-容器><ng-container matColumnDef=LOG"><th mat-header-cell *matHeaderCellDef>日志</th><td mat-cell *matCellDef="let row"><button class="btn btn-info";(click)=onLog()">Log</ng-容器><tr mat-header-row *matHeaderRowDef="displayedColumns;粘性:真"></tr><tr mat-row *matRowDef="let element;列:displayColumns;"类=示例元素行"[class.example-expanded-row]=expandedElement === 元素";(click)="log_message = onElementExpand(element);expandElement = element;"></tr><tr mat-row *matRowDef="let row;列:['expandedDetail']"class="example-detail-row"></tr><mat-toolbar><mat-toolbar-row><button class="btn btn-primary";(点击)=getIpeProcessInstances()";[禁用]=假">{{ 'button.Refresh' |翻译}}</button><span class="example-spacer"></span><mat-paginator [pageSizeOptions]="[5, 10, 20]";showFirstLastButtons></mat-paginator></mat-toolbar-row></mat-toolbar>
CSS
table {宽度:100%;}tr.example-detail-row {高度:0;}tr.example-element-row:not(.example-expanded-row):hover {背景:#f5f5f5;}tr.example-element-row:not(.example-expanded-row):active {背景:#efefef;}.example-element-row td {边框底部宽度:0;}.example-element-detail {溢出:隐藏;显示:弹性;}.example-element-diagram {最小宽度:80px;边框:2px纯黑色;填充:8px;字体粗细:更轻;边距:8px 0;高度:104px;}.example-element-symbol {字体粗细:粗体;字体大小:40px;行高:正常;}.example-element-description {填充:16px;}.example-element-description-attribution {不透明度:0.5;}.mat-海拔-z8 {宽度:100%;}.mat-row:悬停{背景颜色:whitesmoke;}.example-icon {填充:0 14px;}.example-spacer {弹性:1 1 自动;}.mat-分页器{背景颜色:whitesmoke;}
因此,根据 Status 提交的内容,我如何动态更改行颜色?谢谢!
解决方案你也可以使用[ngClass]
来实现:
然后在你的 css 中:
td.is-white {背景: ...;}
等等!希望它有助于理解您可以使用不同的解决方案来实现这一点.
编辑
为了您的使用,请在第二个
[ngClass]
<tr mat-row *matRowDef="let 元素;列:displayColumns;"类=示例元素行"[class.example-expanded-row]="expandedElement === 元素"[ngClass]="{'is-white': element.STATUS === 'S','is-blue': element.STATUS === 'W','is-red': element.STATUS === 'E','is-green': element.STATUS === 'F'}" (click)="log_message = onElementExpand(element);expandElement = element;"></tr>
Hello I have an Angular application that displays in real time the status of processes running in a scheduler engine. I have the following table to display those processes:
What I want is to dynamically change the row background color depending on the Status, like following:
S (started) - White;
W (working) - Blue;
E (error) - Red;
F (finished) - Green;
Html
<table mat-table [dataSource]="this.dataSource" multiTemplateDataRows class="mat-elevation-z8" >
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="displayedColumns.length">
<div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'" *ngIf="log_message">
<div class="example-element-description">
<p *ngIf="this.log_message">Log Message:</p>
<p *ngIf="!this.log_message">N/A</p>
<pre *ngIf="this.log_message"> {{ this.log_message }} </pre>
</div>
</div>
</td>
</ng-container>
<ng-container matColumnDef="UPD_DATE">
<th mat-header-cell *matHeaderCellDef> UPD_DATE </th>
<td mat-cell *matCellDef="let data"> {{data.LAST_UPD_DATETIME}} </td>
</ng-container>
<ng-container matColumnDef="S">
<th mat-header-cell *matHeaderCellDef> S </th>
<td mat-cell *matCellDef="let data"> {{data.STATUS}} </td>
</ng-container>
<ng-container matColumnDef="PROC">
<th mat-header-cell *matHeaderCellDef> PROC </th>
<td mat-cell *matCellDef="let data"> {{data.PROC_ID}} </td>
</ng-container>
<ng-container matColumnDef="AGENT">
<th mat-header-cell *matHeaderCellDef> AGENT </th>
<td mat-cell *matCellDef="let data"> {{data.AGENT_ID}} </td>
</ng-container>
<ng-container matColumnDef="SUBMIT_DATE">
<th mat-header-cell *matHeaderCellDef> SUBMIT_DATE </th>
<td mat-cell *matCellDef="let data"> {{data.SUBMIT_DATE}} </td>
</ng-container>
<ng-container matColumnDef="END_DATE">
<th mat-header-cell *matHeaderCellDef> END_DATE </th>
<td mat-cell *matCellDef="let data"> {{data.END_DATE}} </td>
</ng-container>
<ng-container matColumnDef="START_DATE">
<th mat-header-cell *matHeaderCellDef> START_DATE </th>
<td mat-cell *matCellDef="let data"> {{data.START_DATE}} </td>
</ng-container>
<ng-container matColumnDef="USER_SUBMIT">
<th mat-header-cell *matHeaderCellDef> USER_SUBMIT </th>
<td mat-cell *matCellDef="let data"> {{data.USER_SUBMIT}} </td>
</ng-container>
<ng-container matColumnDef="THREAD_NUM">
<th mat-header-cell *matHeaderCellDef> THREAD_NUM </th>
<td mat-cell *matCellDef="let data"> {{data.THREAD_NUM}} </td>
</ng-container>
<ng-container matColumnDef="INSTANCE_ID">
<th mat-header-cell *matHeaderCellDef> INSTANCE_ID </th>
<td mat-cell *matCellDef="let data"> {{data.INSTANCE_ID}} </td>
</ng-container>
<ng-container matColumnDef="START">
<th mat-header-cell *matHeaderCellDef> START </th>
<td mat-cell *matCellDef="let row"><button class="btn btn-success" (click)="onStart(row)" [disabled]="this.started">Start</button></td>
</ng-container>
<ng-container matColumnDef="STOP">
<th mat-header-cell *matHeaderCellDef> STOP </th>
<td mat-cell *matCellDef="let row"><button class="btn btn-danger" (click)="onStop()">Stop</button></td>
</ng-container>
<ng-container matColumnDef="LOG">
<th mat-header-cell *matHeaderCellDef> LOG </th>
<td mat-cell *matCellDef="let row"><button class="btn btn-info" (click)="onLog()">Log</button></td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let element; columns: displayedColumns;" class="example-element-row"
[class.example-expanded-row]="expandedElement === element" (click)="log_message = onElementExpand(element); expandedElement = element;"></tr>
<tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
</table>
<mat-toolbar>
<mat-toolbar-row>
<button class="btn btn-primary" (click)="getIpeProcessInstances()" [disabled]="false">{{ 'button.Refresh' | translate }}</button>
<span class="example-spacer"></span>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
</mat-toolbar-row>
</mat-toolbar>
CSS
table {
width: 100%;
}
tr.example-detail-row {
height: 0;
}
tr.example-element-row:not(.example-expanded-row):hover {
background: #f5f5f5;
}
tr.example-element-row:not(.example-expanded-row):active {
background: #efefef;
}
.example-element-row td {
border-bottom-width: 0;
}
.example-element-detail {
overflow: hidden;
display: flex;
}
.example-element-diagram {
min-width: 80px;
border: 2px solid black;
padding: 8px;
font-weight: lighter;
margin: 8px 0;
height: 104px;
}
.example-element-symbol {
font-weight: bold;
font-size: 40px;
line-height: normal;
}
.example-element-description {
padding: 16px;
}
.example-element-description-attribution {
opacity: 0.5;
}
.mat-elevation-z8 {
width: 100%;
}
.mat-row:hover {
background-color: whitesmoke;
}
.example-icon {
padding: 0 14px;
}
.example-spacer {
flex: 1 1 auto;
}
.mat-paginator
{
background-color: whitesmoke;
}
So based on the Status filed, how I can dinamicly change the row color? Thank you!
解决方案You can also use [ngClass]
to achieve this:
<td [ngClass]="{
'is-white': data.STATUS === 'S',
'is-blue': data.STATUS === 'W',
'is-red': data.STATUS === 'E',
'is-green': data.STATUS === 'F'
}">...</td>
And then in your css:
td.is-white {
background: ...;
}
Et voilà ! Hope it helps to understand that you can achieve this with different solution.
EDIT
To your use, juste use the [ngClass]
in the second <tr>
<tr mat-row *matRowDef="let element; columns: displayedColumns;" class="example-element-row"
[class.example-expanded-row]="expandedElement === element"
[ngClass]="{
'is-white': element.STATUS === 'S',
'is-blue': element.STATUS === 'W',
'is-red': element.STATUS === 'E',
'is-green': element.STATUS === 'F'
}" (click)="log_message = onElementExpand(element); expandedElement = element;"></tr>
这篇关于Angular Material Table - 将动态背景色应用到一行(Angular 2+)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论