angular - 在 Angular 2 中应用条件样式

Question

我正在尝试应用条件样式，例如，user 中有 obsolete 属性，如果用户的 obsolete 为真，我想添加 <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; 
    }