通过布尔值插值添加class属性值

Question

我有一个简单的 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>。

我想要做的是在 <li> 元素上设置一个 additional class 如果 HasChildren 43=] 饲料是 true.

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

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

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

任何人都可以建议如何让它工作吗？

非常感谢。

Answer 1

working demo

有关 attr、class、样式和其他内容的更多信息，请查看 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>

Answer 2

这就是 ngClass 的用途：

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

通过布尔值插值添加class属性值

Add class attribute value through interpolation of boolean

angular2-template

angular