如何在 table 中设置一行的样式?
How to style a row in a table?
我在 table 中设置一行样式时遇到了一点问题。基本上我的 table 有 4 行。
a) 如果第 标题 5 下的值小于 0,则整个 行需要为红色
b) 如果 标题 5 列下的值等于 17,则整个 行需要为橙色 。
c) 任何其他行 不应 有任何颜色。
我大部分时间都在工作。 我的问题是:
If a row doesn't have any color I still want to make the check icon
green.
这是我的工作代码:
<p-panel class="a-panel-checkIn" header='Compliance Tracking' [toggleable]="true" [collapsed]="isPanelCollapsed" [style]="{ height: '100%' }">
<p-table [value]="complianceTracking" [columns]="cols" selectionMode="single">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [ngClass]="rowData.field5 < 0 ? 'a-danger-row' : (rowData.field5 === 17) ? 'a-yellow-row' : 'a-green-row'">
<td *ngFor="let col of columns" [ngClass]="rowData[col.field] === '' ? 'a-check-icon' : ''">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
</p-panel>
您可以在 app.template.html
中为第二个 ng-template
替换以下代码:
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [ngClass]="rowData.field5 < 0 ? 'a-danger-row' : (rowData.field5 === 17) ? 'a-yellow-row' : ''">
<!-- <td *ngFor="let col of columns" [ngClass]="rowData[col.field] === '' ? 'a-check-icon' : ''"> -->
<td *ngFor="let col of columns" [ngClass]="rowData[col.field] === '' ? ((rowData.field5 > 0 && rowData.field5 !== 17) ? 'a-check-icon a-green-check' : 'a-check-icon' ) : ''">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
在您的 styles.css
中,创建一个新的 css 规则如下:
.a-green-check {
color: #A8CF45;
}
这是Plunkr
希望这就是您想要实现的目标。
如下更新您的模板:
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [ngClass]="rowData.field5 < 0 ? 'a-danger-row' : (rowData.field5 === 17) ? 'a-yellow-row' : ''">
<td *ngFor="let col of columns" [ngClass]="rowData[col.field] === '' ? 'a-check-icon' : ''" class="{{col.field=='field6' && rowData.field5!==17 && rowData.field5>0 ? 'a-green-row':''}}">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
输出:
我在 table 中设置一行样式时遇到了一点问题。基本上我的 table 有 4 行。
a) 如果第 标题 5 下的值小于 0,则整个 行需要为红色
b) 如果 标题 5 列下的值等于 17,则整个 行需要为橙色 。
c) 任何其他行 不应 有任何颜色。
我大部分时间都在工作。 我的问题是:
If a row doesn't have any color I still want to make the check icon green.
这是我的工作代码:
<p-panel class="a-panel-checkIn" header='Compliance Tracking' [toggleable]="true" [collapsed]="isPanelCollapsed" [style]="{ height: '100%' }">
<p-table [value]="complianceTracking" [columns]="cols" selectionMode="single">
<ng-template pTemplate="header" let-columns>
<tr>
<th *ngFor="let col of columns">
{{col.header}}
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [ngClass]="rowData.field5 < 0 ? 'a-danger-row' : (rowData.field5 === 17) ? 'a-yellow-row' : 'a-green-row'">
<td *ngFor="let col of columns" [ngClass]="rowData[col.field] === '' ? 'a-check-icon' : ''">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
</p-table>
</p-panel>
您可以在 app.template.html
中为第二个 ng-template
替换以下代码:
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [ngClass]="rowData.field5 < 0 ? 'a-danger-row' : (rowData.field5 === 17) ? 'a-yellow-row' : ''">
<!-- <td *ngFor="let col of columns" [ngClass]="rowData[col.field] === '' ? 'a-check-icon' : ''"> -->
<td *ngFor="let col of columns" [ngClass]="rowData[col.field] === '' ? ((rowData.field5 > 0 && rowData.field5 !== 17) ? 'a-check-icon a-green-check' : 'a-check-icon' ) : ''">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
在您的 styles.css
中,创建一个新的 css 规则如下:
.a-green-check {
color: #A8CF45;
}
这是Plunkr
希望这就是您想要实现的目标。
如下更新您的模板:
<ng-template pTemplate="body" let-rowData let-columns="columns">
<tr [ngClass]="rowData.field5 < 0 ? 'a-danger-row' : (rowData.field5 === 17) ? 'a-yellow-row' : ''">
<td *ngFor="let col of columns" [ngClass]="rowData[col.field] === '' ? 'a-check-icon' : ''" class="{{col.field=='field6' && rowData.field5!==17 && rowData.field5>0 ? 'a-green-row':''}}">
{{rowData[col.field]}}
</td>
</tr>
</ng-template>
输出: