Question

我有一个我在Angular 2（RC1）中开发的应用程序。需要从数据库创建菜单。数据以JSON格式通过Web Api提供。我想从递归的数据中构建菜单，以确保菜单的深度不是问题。

问题在于我想在ngFor循环的特定行上添加类，并且该类被添加到所有行而不是我想要的行。

代码看起来像这样：

sidenav.component.ts

import { Component, Input } from '@angular/core';
import { IMenu } from '../../../shared/models/menu.interface';
import { MenuComponent } from './menu.component';

@Component({
    moduleId: module.id,
    selector: 'sidenav',
    templateUrl: 'sidenav.component.html',
    directives: [MenuComponent]
})
export class SidenavComponent {
    @Input() menu: IMeni[]
}

sidenav.component.html

...
<menu-view [menu]="menu"></menu-view>
...

menu.component.ts

import { Component, Input } from '@angular/core';
import { IMenu } from '../../../shared/models/menu.interface';
@Component({
    moduleId: module.id,
    selector: 'menu-view',
    templateUrl: 'menu.component.html',
    directives: [MenuComponent]
})
export class MenuComponent {
    isSelected: boolean = false;
    @Input() meni: IMeni[];

    onSelect(): void {
        this.isSelected = !this.isSelected;
    }
}

menu.component.html

<ul>
     <li  *ngFor="let item of menu; let frst=first"
           class="menu-list" 
           [ngClass]="{'active': 'isSelected', 'active': 'frst'}">

        <a [routerLink]="[item.uri]" (click)="onSelect()" > {{item.name}}</a>

        <meni-view [menu]="item.children"></meni-view>

     </li>
</ul>

所以，当我点击父母时，所有父母都会变得活跃，而不仅仅是那个特定的父母，这将是什么令人满意的行为。我做错了什么？

Answer 1

似乎您的变量 isSelected 在列表中共享。更改变量以跟踪索引。

export class App {
    menu = [{name: "Item 1", url: "/item1"}, {name: "Item 2", url: "/item2"},{name: "Item 3", url: "/item3"}];
    selectedIdx = 0;

    selectItem(index):void {
        this.selectedIdx = index;
    }
}

用

渲染它

<li  *ngFor="let item of menu;let i = index"
   class="menu-list" [ngClass]="{'active': selectedIdx == i}">
   <a (click)="selectItem(i)"> {{item.name}}</a>
</li>

工作 http://plnkr.co/edit/7aDLNnhS8MQ1mJVfhGRR

Answer 2

有一些多余的'。我想你想绑定属性isSelected的值而不是'isSelected'字符串（与frst相同）

 <li  *ngFor="let item of menu; let frst=first"
       class="menu-list" 
       [ngClass]="{'active': isSelected, 'active': frst}">

Answer 3

当您收到JSON数据并将其保存在您的变量中时，我得到了一个解决方案（并且很简单）（在您的情况下称为 menu ）添加到 menu 一个名为classes的新字段并在模板中呈现它！

示例：

@Input() menu: IMenu[]; 
getMenu(){
  this.http.get(url).then(data => {
    this.menu = data;
    for(let i = 0; i < this.menu.length; i++) {
      if(i == indexOfWantedElement){
        this.menu[i].classes = "myClass";
        continue;
      }
      this.menu[i].classes = ""; // others will have no classes 
    }
  }
}

在模板中，您可以轻松渲染

<ul>
  <li  *ngFor="let item of menu;" class="menu-list {{ item.classes }}">
    <a [routerLink]="[item.uri]" (click)="onSelect()" >{{item.name}}</a>
    <meni-view [menu]="item.children"></meni-view>
  </li>
</ul>

Answer 4

将#clickState添加到*ngFor

中的行

<row #clickState>
     <i class="icon-cloud-download"
        *ngIf="!clickState.clicked"
        (click)="clickState.clicked=true"></i>
     <i class="fa fa-spinner"
         *ngIf="clickState.clicked 
         (click)="clickState.clicked=false"></i>
</row>

ngFor循环中的样式

4 个答案: