Javascript 有条件地更改表格数据的颜色角度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>

---

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

您可以使用

[ngClass]

执行此操作，并为表行分配一个类。

NgClass

指令允许您为DOM元素动态设置CSS类。 您需要为您的

css类

编写符合您目的的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>

您还可以使用

NgStyle

指令来设置给定的DOM元素样式属性。 例：

......
您可以使用
[ngClass]
执行此操作，并为表行分配一个类。
NgClass
指令允许您为DOM元素动态设置CSS类。
您需要为您的
css类
编写符合您目的的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>

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


......
您可以使用
*ngClass
有条件地应用类

<tr *ngFor="let prospect of deployment"
    *ngClass="{specialHighlight: prospect.processedProspects > 10 && yourConditionOnEmails}">



当然，
specialHighlight
类将在css中以某种方式定义。
您可以使用
*ngClass
有条件地应用类

<tr *ngFor="let prospect of deployment"
    *ngClass="{specialHighlight: prospect.processedProspects > 10 && yourConditionOnEmails}">



当然，
specialHighlight
类将以某种方式在css中定义。
谢谢，但我认为这并不能完全回答这个问题。我的目标是大于100的ProcessedProspect。我想强调一下emailsSent低于50%的潜在客户。@LDB：那么你至少应该提供更多关于你的emailsSent数据的信息。它是一个介于0和100之间的整数吗？它是介于0和1之间的十进制数吗？@LDB:您应该尝试上述方法来实现您的解决方案，除非提供完整的细节，否则我们无法编写完整的代码。也不要期望得到完整的代码。根据您的最小可复制代码片段，提供了答案。如果您需要计算百分比并决定在该百分比上设置行的样式，您可以使用函数调用来实现这一点<代码>[ngClass]=“{'font-red'：getEmailSentPercentage（）>10”
谢谢，但我认为这并不能完全回答问题。我的目标是大于100的ProcessedProspect。我想强调一下emailsSent小于50%的这些Prospect。@LDB：那么你至少应该提供一些有关emailsSent数据的详细信息。它是0到100之间的整数吗？是十进制吗数字介于0和1之间？等等。@LDB:您应该尝试上述方法来实现您的解决方案，除非提供完整的详细信息，否则我们无法编写完整的代码。也不要期望获得完整的代码。根据您的最小可复制代码段，提供了答案。如果您需要计算百分比并决定在该行上设置样式，yo你可以使用函数调用来实现这一点。
[ngClass]=“{'font-red'：getEmailSentPercentage（）>10”
我认为你应该提供更多关于如何获取SentMail百分比数据的详细信息。你的数据准确程度如何（欢迎举例）？我认为您应该提供更多关于如何获取sentMails百分比数据的详细信息。您的数据准确程度如何（欢迎举例）？是的，您可以在同一标记的属性中直接访问
*ngFor
变量。是的，您可以在同一标记的属性中直接访问
*ngFor
变量。
<tr *ngFor="let prospect of deployment"
    *ngClass="{specialHighlight: prospect.processedProspects > 10 && yourConditionOnEmails}">