在Angular 2中应用条件格式样式

Question

我正在尝试应用条件样式，例如，在用户中有过时的属性，如果用户的过时标志是 true，我想添加类似以下的<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>

- Anna Lee

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

- Peza

---

非常感谢您的帮助。我可以问一个问题吗？如果我不想定义自己的CSS，而是想从Bootstrap中借用<del>，它会将线放在字符串{{user.name}}的中间。有没有办法实现这一点？我不太习惯使用定制的CSS。所以...再次感谢您的答复。 - Anna Lee

我不确定是否可以有条件地使用<del>标签而不隐藏标签内的文本。您是否使用分离的HTML和CSS模板文件？我已编辑答案以包含您需要的CSS代码。 - Peza

我明白了，我觉得可以应用。非常感谢！ - Anna Lee

无论 user.obsolete 的值如何，都会将它打上删除线 :) 你有什么想法吗？我认为这可能是我的错。但我认为我按照你建议的方式去做了 :) - Anna Lee

当我直接获取组件属性的值时，它无法正确地获取到值。例如，我将变量isLineThrough设置为组件的属性，然后在true和false之间切换该变量，结果运行良好。但是在我的实际源代码中，它引用了user.obsolete，却无法正常工作。我不知道为什么。我打印出了这个值，发现它被正确地设置了。 - Anna Lee

以防万一，这是因为变量类型的问题，实际上，用户.过时值并没有明确定义为布尔类型。 - Anna Lee