如何在 Angular 2 中添加和删除 CSS class 名称？

Question

我得到 JSON 格式的数据并且必须而且我必须处理用户点击的项目。我正在编写这段代码，它可以正常工作。

我的示例 DOM-用法：

@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');
    }
  }
}

如何在类似情况下添加和删除 CSS class 没有 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;
      }
    }
  }
}

如何在 Angular 2 中添加和删除 CSS class 名称？

How to add and remove CSS class names in Angular 2?

angular2-template