Angular

Question

我仍然是使用 angular 的新手，我想知道是否有人可以帮助我解决以下问题或为我指明正确的方向。我有以下代码

<ng-template pTemplate="body" let-rowData let-columns="columns" >
   <tr [pSelectableRow]="rowData" >
       <td *ngFor="let col of columns"  (click)="changeButtonStatus();" >
          {{col.field == 'defect_target_completion_date'?  (rowData[col.field] | date: 'dd-MM-yyyy'):rowData[col.field]}}   
       </td
   </tr>
</ng-template>

代码工作正常，但我需要添加以下条件：如果 defect_target_completion_date 早于今天的日期，则将颜色更改为红色，否则保持原样。

我尝试在组件中执行此操作但没有成功，并且在尝试将其添加为语句的第二部分时出现编译错误。

谢谢。

Answer 1

您可以根据条件绑定样式。

这样试试。

.html

<td *ngFor="let col of columns" (click)="changeButtonStatus();"  [style.color]="col.field == 'defect_target_completion_date'? isDateLess(rowData[col.field]) ? 'red':true:true">
    {{col.field == 'defect_target_completion_date'?  (rowData[col.field] | date: 'dd-MM-yyyy'):rowData[col.field]}}
</td>

.ts

  today = new Date();

  isDateLess(date: any) {
    if (new Date(date) < this.today) {
      return true;
    } else {
      return false;
    }
  }

Working Demo

Angular - primeng ngfor 使用 ngif 的相同列的多个条件

Angular - primeng ngfor multiple conditions for the same columns using ngif

primeng