Question

如果满足特定条件，我希望能够突出显示特定的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>

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

export class DeploymentSummaryScreen implements OnInit {

    loading: boolean;

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

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

Answer 1

您可以使用[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>

Answer 2

您可以使用*ngClass有条件地应用课程。

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

当然还有specialHighlight类将在您的CSS中定义。

有条件地更改表数据的颜色Angular 2+

2 个答案: