Angular 2でCSSクラス名を追加および削除するにはどうすればよいですか？

Question

データをJSON形式で取得するので、ユーザーがクリックした項目を処理する必要があります。私はこのコードを書いており、正しく動作します。私は同様のケースのためにDOMずにCSSクラス名を追加したり削除するにはどうすればよい

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div *ngFor="let person of personsList; let i = index"> 
    <span class="toggle-icon" (click)="toggleStatus(person.id)" id="{{person.id}}">{{person.name}}</span> 
    </div> 
    `, 
    styles: ['.active { color: red; }'] 
}) 
export class App { 
    toggleIsActive: boolean = false; 
    personsList: any; 

    constructor() { 
    this.personsList = [ 
     { 
     "id": "1", 
     "name": "Alex" 
     }, 
     { 
     "id": "2", 
     "name": "John" 
     } 
    ] 
    } 

    toggleStatus(id){ 
    const span = document.getElementById(`${id}`); 
    if (span.className.indexOf('active') >= 0) { 
     span.classList.remove('active'); 
    } else { 
     span.classList.add('active'); 
    } 
    } 
} 

：DOM-用法

私の例？

Answer 1

「personIsActive」フィールドを追加し、Class bindingを使用します。

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div *ngFor="let person of personsList; let i = index"> 
    <span class="toggle-icon" [class.active]="person.personIsActive" 
     (click)="toggleStatus(person.id)">{{person.name}}</span> 
    </div> 
    `, 
    styles: ['.active { color: red; }'] 
}) 
export class App { 
    toggleIsActive: boolean = false; 
    personsList: any; 

    constructor() { 
    this.personsList = [ 
     { 
     "id": "1", 
     "name": "Alex", 
     "personIsActive": false 
     }, 
     { 
     "id": "2", 
     "name": "John", 
     "personIsActive": false 
     } 
    ] 
    } 

    toggleStatus(id){ 
    for (let i = 0; i < this.personsList.length; i++) { 
     if (this.personsList[i].id === id) { 
     this.personsList[i].personIsActive= !this.personsList[i].personIsActive; 
     } 
    } 
    } 
}