时间戳

首页 > 解决方案 > 有条件地改变表格数据的颜色Angular 2+

javascript - 有条件地改变表格数据的颜色Angular 2+

问题描述

如果满足某个条件，我希望能够突出显示特定的 td。

<tr *ngFor="let prospect of deployment">
                    <td>{{prospect.campaignName}} | {{prospect.campaignId}}</td>
                    <td>{{prospect.dealerName}} | {{prospect.dealerId}}</td>                
                    <td class="group-added">{{prospect.addedDate | date : 'shortDate' }}</td>
                    <td class="group-added" style="text-align: right;">{{prospect.addedProspects | number}}</td>
                    <td class="group-processed">{{prospect.startedDate | date : 'shortDate' }}</td>
                    <td class="group-processed">{{prospect.stage}}</td>                
                    <td class="group-processed" style="text-align: right;">{{prospect.processedProspects | number}}</td>
                    <td class="group-processed" style="text-align: right;">{{prospect.emailsSent | number}}</td>
                    <td class="group-processed" style="text-align: right;">{{prospect.emailsError | number}}</td>
                    <td *ngIf="perms.has(perms.CREATIVE) && prospect.bundleId != 0 && prospect.bundleId != null" style="text-align: right;">
                        <a [href]="'bundles/' + prospect.bundleId + '/assets'">Creative</a>
                    </td>
                </tr>

我想用红色突出显示前景.processedProspects 大于 100 并且该潜在客户的已发送电子邮件数量小于 50% 的整行。我不确定是否可以单独使用插值和类绑定来完成此操作。

export class DeploymentSummaryScreen implements OnInit {

    loading: boolean;

    deployment: Deployment[];
    startDate: Date;
    endDate: Date;

不确定是否需要更多 .ts 文件。

标签： javascripthtmlangular

解决方案

您可以[ngClass]用于执行此操作并将类分配给表格行。该NgClass指令允许您为 DOM 元素动态设置 CSS 类。您需要为css-class您的目的编写 css：

<tr [ngClass]="{'font-red': prospect.processedProspects > 10" *ngFor="let prospect of deployment">
                    <td>{{prospect.campaignName}} | {{prospect.campaignId}}</td>
                    <td>{{prospect.dealerName}} | {{prospect.dealerId}}</td>                
                    <td class="group-added">{{prospect.addedDate | date : 'shortDate' }}</td>
                    <td class="group-added" style="text-align: right;">{{prospect.addedProspects | number}}</td>
                    <td class="group-processed">{{prospect.startedDate | date : 'shortDate' }}</td>
                    <td class="group-processed">{{prospect.stage}}</td>                
                    <td class="group-processed" style="text-align: right;">{{prospect.processedProspects | number}}</td>
                    <td class="group-processed" style="text-align: right;">{{prospect.emailsSent | number}}</td>
                    <td class="group-processed" style="text-align: right;">{{prospect.emailsError | number}}</td>
                    <td *ngIf="perms.has(perms.CREATIVE) && prospect.bundleId != 0 && prospect.bundleId != null" style="text-align: right;">
                        <a [href]="'bundles/' + prospect.bundleId + '/assets'">Creative</a>
                    </td>
                </tr>

在 CSS 中：

     .font-red { color: red; }

您还可以使用NgStyle指令来设置给定的 DOM 元素样式属性。前任：

  <tr [ngStyle]="{'background-color': prospect.processedProspects > 10 ? 'green' : 'red' }">
    ......
</<tr>

推荐阅读