Angular2:ngFor和条件类

时间:2016-07-29 08:22:15

标签: angular

我正在尝试在Angular 2中实现2级导航,其中第一级像accordeon一样工作。如果单击第一级,则会显示子元素。通过简单地将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的{​​{1}}类中,并只操作此属性:

isOpen

2 个答案:

答案 0 :(得分:2)

您无法重新分配模板变量。这可能会导致一些无法预料的问题。解决方案可能是向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> 

答案 1 :(得分:1)

您无法在ngFor中声明任意变量。只有一些预定义的可以通过这种方式提供。

组件中需要一个数组,允许您存储每行的打开/关闭状态,或者只保存索引(如果一次只能打开一行)。 “数组”也可以是isOpen对象中的row属性。

<ul>
    <li *ngFor="let row of sidebaritem; let isOpen = false;" [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>

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