Angular 2 - Ändern CSS-Selektor auf Klick

Question

Hier ist mein Eckige 2 App:

//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 {} 

Wenn das Click-Ereignis selectItem ausgelöst wird, soll sie die itemclass ändern. Es passiert jedoch nichts.

Finden Sie meine App unter Plunker.

Alles, was ich erreichen will ist: wenn ein Benutzer auf ein Element klickt wäre es ein active CSS-Selektor haben, und wenn ein anderes Element geklickt wird, wäre es einfach zu wechseln und alle Geschwister wird nicht die active CSS-Klasse mehr .

Aber es funktioniert nicht richtig. Wie macht man das in Angular 2?

Answer 1

Hier ist Ihre Anforderung. Bitte überprüfen Sie den Plunker in der Frage.

Hier verwendete ich, [class.active]="item == itemclass", Dies bindet den Klassennamen active an das aktuelle ausgewählte Element.

Diese [class.active][], Klammern sind eine Möglichkeit, die Bindung von Controller zu sehen.

this.itemclass = item;In dieser Zeile wird das aktuelle Element der Elementklasse zugewiesen, die wir in der Ansicht überprüft haben.

Komponente:

@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> 
    `, 
}) 

Klasse:

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

Wenn Sie mehrere wählt haben müssen, und speichern sie irgendwo: Dort haben Sie active Array, das den Status aller Ihrer Objekte speichert (an/aus). während der Bauphase ordnen Sie active Array 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); 

    } 

}