在 Angular 中，如何在 <td> 中使用 If .. then.. else 条件实现 *ngIf标签? [英] In angular how to implement *ngIf with If .. then.. else condition inside a <td> tag?

问题描述

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

I have tried to show the if else condition inside block of table using ngIf but i am not able to display it.

  <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>

推荐答案

else and then can only used on ng-templates 如果你想要条件样式你可以使用 ngClass 或者只使用 [class.someClass 添加一个类] ="condition" 或使用 [style.'some property'] 操作样式，因为您使用的是 ngStyle 试试这个在您的 component.ts 中，您可以拥有一个函数，该函数根据您的 !client.auditorGroup

else and then can only used on ng-templates if you want conditional styles you could use ngClass or just add a single class using [class.someClass] ="condition" or manipulate the style using [style.'some property'] since you're using ngStyle try this in your component.ts you can have a function that returns your style depending on conditions such as your !client.auditorGroup

getStyle(value) { 
if(!value)
  return this.titleStyles;
}else {
  return this.oldStyles1;
}

然后在你的 component.html

and then in your component.html

<tr *ngFor="let client of clients">
<!--here i need to implement it-->
   <td 
   [ngStyle]="getStyle(client.auditorGroup)">{{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 [ngStyle]="getStyle(client.auditorGroup)">Edit
   Delete</td>
</tr>

这篇关于在 Angular 中，如何在 <td> 中使用 If .. then.. else 条件实现 *ngIf标签?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！