Angular2：ngFor和条件类

我想在Angular 2中实现2级导航，其中第一级像accordeon一样工作。如果您点击第一级，则会显示子元素。这是通过简单地将css类open添加到父元素li来完成的。所有这些都是由2 ngFor循环动态生成的。Angular2：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

最简单的方法是将属性添加到名为isOpen的sidebaritem类，只是操纵这个属性：

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>

来源

2016-07-29 bernhardh

（点击）需要引用的函数在你的.ts。 –

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

来源

2016-07-29 08:27:17 PierreDuc

谢谢！你的想法是最好的。见上面我的完整解决方案。 – bernhardh

不能在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>

来源

2016-07-29 08:27:35

谢谢，但pierreDuc更快;） – bernhardh

Angular2：ngFor和条件类

回答

相关问题