Question

这是我的Angular 2应用程序：

//root app component
import {Component, NgModule} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div class="{{item.itemclass}}" id="lists" *ngFor="let item of items">
        <div class="item" (click)="selectItem(item)">{{item}}</div>
        <div>{{item.itemclass}}</div>
      </div>
    </div>
  `,
})

export class App {
  name:string;
  items: any[];
  itemclass : string;
  constructor() {
    this.name = 'Angular2';
    this.items = [
      'lorem',
      'ipsum',
      'sit',
      'trump :D'
    ];
    this.itemclass = '';
  }
  selectItem(item){
    console.log(item);
    item.itemclass = "active";
  }
}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App ],
  bootstrap: [ App ]
})
export class AppModule {}

触发点击事件selectItem时，应该更改itemclass。然而，没有任何事情发生。

在Plunker找到我的应用。

我想要达到的目的是：当用户点击某个项目时，它会有一个active css选择器，当点击另一个项目时，它只会切换，所有兄弟姐妹都不会拥有{{ 1}} css类了。

但它没有正常运作。如何在Angular 2中做到这一点？

Answer 1

这是您的要求。请检查问题中的plunker。

此处，我使用[class.active]="item == itemclass"，这会将班级名称active绑定到当前所选项目。

这些[class.active] []，括号是从控制器到视图的单向绑定。

this.itemclass = item; 此行将当前项目分配给我们在视图中检查的项目类。

<强>组件：

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div id="lists" *ngFor="let item of items">
        <div class="item" [class.active]="item == itemclass" (click)="selectItem(item)">{{item}}</div>
        <div>{{item.itemclass}}</div>
      </div>
    </div>
  `,
})

<强>类别：

export class App {
  name:string;
  items: any[];
  itemclass : string;
  constructor() {
    this.name = 'Angular2';
    this.items = [
      'lorem',
      'ipsum',
      'sit',
      'trump :D'
    ];
    this.itemclass = '';
  }
  selectItem(item){

    this.itemclass = item;
    console.log(this.itemclass);
  }
}

Here is the solved plunker link.

Answer 2

如果您需要多个选择并将其存储在某处：那里有active数组，用于存储您拥有的所有项目的状态（开/关）。在构建阶段，您将active数组映射到false

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>Hello {{name}}</h2>
      <div class="{{item.itemclass}}" id="lists" *ngFor="let item of items; let i = index">
        <div class="item"  [class.active]="active[i]" (click)="active[i] = !active[i]">{{item}}</div>
        <div>{{item.itemclass}}</div>
      </div>
    </div>
  `,
})

export class App {
  name:string;
  items: any[];
  itemclass : string;
  active: any[] = [];

  constructor() {
    this.name = 'Angular2';
    this.items = [
      'lorem',
      'ipsum',
      'sit',
      'trump :D'
    ];
    this.itemclass = '';
    this.active.length = this.items.length;
    this.active.map(e=> false);

  }

}

Angular 2 - 单击时更改css选择器

2 个答案: