在角度 2 中应用条件样式

Question

我正在尝试应用条件样式 例如，用户中有过时的属性，如果用户的过时是真的，我想添加如下所示<del>。我在网上搜索，但我不知道什么是最好的方法。我知道*ngIf，所以我可以使用它，但我认为有更聪明的方法。如果有人习惯了，你能告诉我吗？

<tr *ngFor="let user of pagedItems">
<td align="left">{{user.name}}</td>
<td align="left">{{user.age}}</td>
</tr>

<tr *ngFor="let user of pagedItems">
<td align="left"><del>{{user.name}}</del></td>
<td align="left"><del>{{user.age}}</del></td>
</tr>

Answer 1

您可以执行以下操作：

<tr *ngFor="let user of pagedItems">
<td align="left">
<span [class.obselete]="user.obsolete">{{user.name}}</span>
</td>
<td align="left">
<span [class.obselete]="user.obsolete">{{user.age}}</span> 
</td>
</tr>

如果您user.obsolete = true，这会将 css 类.obselete应用于文本。

用于直通的 CSS：

.obselete { 
text-decoration: line-through; 
}