Angular - применение нескольких условий для одних и тех же столбцов с использованием ngif - PullRequest
Новая
       3

Angular - применение нескольких условий для одних и тех же столбцов с использованием ngif

1 голос
/ 10 марта 2020

Я все еще новичок, использующий 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>

код работает нормально, но мне нужно добавить следующее условие: если дефект_target_completion_date раньше сегодняшней даты, то измените цвет на красный, иначе просто оставьте его как есть.

Я попытался сделать это в компоненте безуспешно, и при попытке добавить его в качестве второй части оператора я получаю ошибки компиляции.

Спасибо.

1 Ответ

1 голос
/ 10 марта 2020

Вы можете привязать стиль в зависимости от условия.

Попробуйте вот так.

. 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;
    }
  }

Рабочая демоверсия

...