Angular2：ngFor 和条件类答案

【问题标题】：Angular2: ngFor and conditional ClassAngular2：ngFor 和条件类
【发布时间】：2016-07-29 08:22:15
【问题描述】：

我正在尝试在 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"part 上的错误。

我该如何解决这个问题？

感谢 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>

【问题讨论】：

（点击）需要引用你的.ts中的一个函数。

标签： angular

【解决方案1】：

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

【讨论】：

谢谢！你的想法是最好的。请参阅上面的完整解决方案。

【解决方案2】：

您不能在ngFor 中声明任意变量。以这种方式只能提供一些预定义的。

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

<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>

【讨论】：

谢谢，但 pierreDuc 更快 ;)