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

我想要实现的是:当用户点击一个项目时，它会有一个 active css 选择器，而当另一个项目被点击时，它会简单地切换，所有的 sibling 都不会active css 类。

但是它不能正常工作。如何在 Angular 2 中做到这一点？

Answer 1

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

在这里，我使用了 [class.active]="item == itemclass"，这将类名 active 绑定(bind)到当前选定的项目。

这些 [class.active] []，括号是从 Controller 绑定(bind)到 View 的一种方式。

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

组件:

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