setElementClass für mehrere Klassen in angular2

Question

ich mehrere Klassen hinzufügen bin versucht, nachdem ich ein Symbol klicken in angular2

Dies ist mein Code:

import {Component, ElementRef, Renderer} from 'angular2/core'; 
import {CourseService} from './courses.service'; 
import {AutoGrowDirective} from './auto-grow.directive'; 

@Component({ 
    selector: 'courses', 
    template: `<i (click)="onclick($event)" class="glyphicon glyphicon-star"></i> 
       <h3>Courses</h3> 
       {{title}} 
       <input type="text" autoGrow/> 
       <ul> 
        <li *ngFor="#course of courses"> 
         {{course}} 
        </li> 
       </ul>`, 
    providers: [CourseService], 
    directives: [AutoGrowDirective] 
}) 
export class CoursesComponent { 
    title:string = "List of course"; 
    courses; 

    constructor(courseService:CourseService, private el:ElementRef, private renderer:Renderer) { 
     this.courses = courseService.getCourses(); 
    } 

    onclick($event) { 
     this.renderer.setElementClass(this.el.nativeElement, 'glyphicon glyphicon-star-empty', true); 
    } 
} 

Aber wenn ich auf dem Symbol Konsole meines Browser klicken wirft dieser Fehler:

EXCEPTION: Error during evaluation of "click" 

ich dachte, es ist, weil ein Raum zwischen den Klassen, was ich nicht verstehen konnte ich ist, wie kann ich mehrere Klassen in einem Elemente hinzufügen?

Answer 1

Rufen Sie einfach this.renderer.setElementClass(...) für jede Klasse einzeln und stellen Sie den isAdd Parameter true

this.renderer.setElementClass(this.el.nativeElement, 'glyphicon', isAdd: true); 
this.renderer.setElementClass(this.el.nativeElement, 'glyphicon-star-empty', isAdd: true); 

(nicht getestet)

Update

@Component({ 
    selector: 'courses', 
    template: `<i (click)="onclick($event)" class="glyphicon glyphicon-star"></i> 
       <h3>Courses</h3> 
       {{title}} 
       <input type="text" autoGrow/> 
       <ul> 
        <li *ngFor="#course of courses"> 
         {{course}} 
        </li> 
       </ul>`, 
    providers: [CourseService], 
    directives: [AutoGrowDirective] 
}) 
export class CoursesComponent { 
    title:string = "List of course"; 
    courses; 

    constructor(courseService:CourseService) { 
     this.courses = courseService.getCourses(); 
    } 


    @HostBinding('class.glyphicon') 
    @HostBinding('class.glyphicon-star-empty') 
    _isGlyphIcon:boolean = false; 

    onclick($event) { 
     this._isGlyphIcon = true; 
    } 
} 

update2

@Component({ 
    selector: 'courses', 
    template: `<i (click)="onclick($event)" [ngClass]="_iconClasses"></i> 
       <h3>Courses</h3> 
       {{title}} 
       <input type="text" autoGrow/> 
       <ul> 
        <li *ngFor="#course of courses"> 
         {{course}} 
        </li> 
       </ul>`, 
    providers: [CourseService], 
    directives: [AutoGrowDirective] 
}) 
export class CoursesComponent { 
    title:string = "List of course"; 
    courses; 

    constructor(courseService:CourseService) { 
     this.courses = courseService.getCourses(); 
    } 

    _iconClasses:string[] = ['glyphicon', 'glyphicon-star']; 

    onclick($event) { 
     this._iconClasses = ['glyphicon', 'glyphicon-star-empty']; 
    } 
}