时间戳

首页 > 解决方案 > 角度如何在标签内使用 If .. then.. else 条件实现 *ngIf？

angular - 角度如何在标签内使用 If .. then.. else 条件实现 *ngIf？

问题描述

我尝试使用 ngIf 在表块​​内显示 if else 条件，但我无法显示它。

  <tr *ngFor="let client of clients">
<!--here i need to implement it-->
   <td *ngIf="!client.auditorGroup"; then 
   [ngStyle]="titleStyles else [ngStyle]="oldStyles1">{{client.selectionId}}</td>
   <td>{{client.selectionDate}}</td>
   <td>{{client.selectedBy}}</td>
   <td>{{client.panEximNumber}}</td>
   <td>{{client.name}}</td>
   <td>{{client.address}}</td>
   <td>{{client.phoneNumber}}</td>
   <td>{{client.selectionType}}</td>
   <td *ngIf="!client.auditorGroup" [ngStyle]="titleStyles">Edit
   Delete</td>
</tr>

标签： angularangular6

解决方案

您需要提供对模板的引用：

<table>
  <tr>
    <td *ngIf="show; else tpl">A</td>
  </tr>
</table>

<button (click)="show = !show">Toggle</button>

<ng-template #tpl><td>Else template</td></ng-template>

如果要根据条件切换样式，可以使用以下方法：

<td [ngStyle]="calcStyles(client.auditorGroup)">{{client.selectionId}}</td>

calcStyles(auditorGroup) {
  if(auditorGroup) {
    return { color: 'red' }
  }

  return { color: 'green' }
}

推荐阅读