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

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找到我的应用程序。

我想要实现的是：当用户点击一个项目时，它会有一个activecss 选择器，当另一个项目被点击时，它会简单地切换，所有的兄弟姐妹将不再有activecss 类。

但它不能正常工作。如何在 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);
  }
}

这是解决的plunker链接。