Question

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

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

我有一个消耗数据的Angular 2 Component，如下所示：

@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 Feed的<li>的值为HasChildren，我想要在true元素上设置附加类。

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

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

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

有人可以建议如何让这个工作吗？

非常感谢。

Answer 1

working demo

有关attr，class，style和其他内容的更多信息，请查看备忘单 - 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}">

通过布尔值

2 个答案: