通过布尔值的插值添加类属性值答案

【问题标题】：Add class attribute value through interpolation of boolean通过布尔值的插值添加类属性值
【发布时间】：2016-04-09 21:11:45
【问题描述】：

我有一个简单的 Angular 2 应用程序从 JSON API 中提取值并输出这些值的 HTML 列表。最终的想法是在 UI 中打开树节点时，从渐进式 API 调用建立的结果创建树视图。现在我保持简单，只返回一个简单的 JSON 对象，如下所示：

[
    {"Id":1054,"Name":"Rugby League","HasChildren":true},
    {"Id":1056,"Name":"Football","HasChildren":false}
]

我有一个使用数据的 Angular 2 组件，如下所示：

@Component({
    selector: 'content-list',
    template: `
        <ol class="tree">
            <li *ngFor="#contentNode of contentNodes" class="tree__branch">
                {{ contentNode.Name }}
            </li>
        </ol>
        <div class="error" *ngIf="errorMessage">{{errorMessage}}</div>
    `
})

它提取 JSON 数据并映射到 HTML 列表，该列表在浏览器中输出填充的 <ol>。

如果 JSON 提要中 HasChildren 的值为 true，我想要在 <li> 元素上设置一个附加类。

我认为可以像这样插入值：

<li *ngFor="#contentNode of contentNodes" class="tree__branch {{ contentNode.HasChildren ? "tree__branch--has-children" : "" }}">

但是，这会导致模板编译错误。

谁能建议如何让它工作？

非常感谢。

【问题讨论】：

标签： angular angular2-template

【解决方案1】：

working demo

有关 attr、class、style 和其他内容的更多信息，请查看 Cheat Sheet -https://angular.io/docs/ts/latest/cheatsheet.html

<li *ngFor="#contentNode of contentNodes"
    class="tree__branch" 
    [class.tree__branch--has-children]="contentNode.HasChildren">
                {{ contentNode.Name }}
</li>

【讨论】：

谢谢，但至关重要的是，这并没有按要求设置附加类。
你这是什么意思？你检查过我的演示了吗？
tree__branch 是添加/删除的类。如果您希望将类命名为 additional，则只需更改该部分即可。
无论HasChildren 的值如何，都应该有一个tree__branch 类。当HasChildren 为true 时，它需要设置一个额外的类，因此这些元素上的类属性将显示为：class="tree__branch tree__branch--has-children"。
然后使用class="tree__branch" [class.tree__branch--has-children]="contentNode.HasChildren"

【解决方案2】：

这就是ngClass 的用途：

<li *ngFor="#contentNode of contentNodes" 
    class="tree__branch"
    [ngClass]="{'tree__branch--has-children': contentNode.HasChildren}">

【讨论】：

谢谢，但至关重要的是，这并没有按要求设置附加类。
是的，确实如此。如果HasChildren 为真，则添加tree__branch--has-children 类，如果为假则不添加。
我的错！抱歉，JB，是的，你是对的 :) 谢谢。