Angular2：ngFor和条件类

bernhardh 发表于 Dev

伯恩哈德

我正在尝试在Angular 2中实现2级导航，其中第一级的工作方式类似于手风琴。如果单击第一级，则会显示子元素。这是通过简单地将css类添加open到父li元素来完成的。所有这些都是由2个ngFor循环动态生成的。

这是我现在拥有的：

<ul>
    <li *ngFor="let row of sidebaritem; let isOpen = false;" [class.open]="isOpen">
        <a (click)="isOpen = !isOpen">{{row.title}}</a>
        <ul>
            <li *ngFor="let child of row.children">
                <a [routerLink]="child.route">{{child.name}}</a>
            </li>
        </ul>
    </li>
</ul>

问题是，我得到了“例外：无法分配给引用或变量！” (click)="isOpen = !isOpen"部分错误。

我怎样才能解决这个问题？

感谢PierreDuc的解决方案

最简单的方法是将属性添加到sidebaritem称为的类中，isOpen然后操纵该属性：

class SidebarnaviItem {
    isOpen: boolean = false;

    constructor(public name?: string, public route?: any, public children?: SidebarnaviItem[]) {}
}

<ul>
    <li *ngFor="let row of sidebaritem;" [class.open]="row.isOpen">
        <a (click)="row.isOpen = !row.isOpen">{{row.title}}</a>
        <ul>
            <li *ngFor="let child of row.children">
                <a [routerLink]="child.route">{{child.name}}</a>
            </li>
        </ul>
    </li>
</ul>

波尔·克鲁伊特（Poul Kruijt）

您不能重新分配模板变量。这可能会导致一些无法预料的问题。一个解决方案可能是isOpen向您的row对象添加一个：

<ul>
    <li *ngFor="let row of sidebaritem" [class.open]="row.isOpen">
        <a (click)="row.isOpen = !row.isOpen">{{row.title}}</a>
        <ul>
            <li *ngFor="let child of row.children">
                <a [routerLink]="child.route">{{child.name}}</a>
            </li>
        </ul>
    </li>
</ul>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。