Angular:如何替换一个列表的CSS类，有2个以上的类？

<ul>
  <li *ngFor="let item of items; index as i" [ngClass]="{'new-class': shouldApplyNewClass(i)}">
    {{ item }}
  </li>
</ul>

shouldApplyNewClass(index: number): boolean {
  // 根据索引或其他条件返回true或false
  return index % 2 === 0; // 例如，偶数索引的项应用新类
}

import { Component, Renderer2, ElementRef } from '@angular/core';

@Component({
  // ...
})
export class YourComponent {
  constructor(private renderer: Renderer2, private el: ElementRef) {}

  changeClass() {
    const listItems = this.el.nativeElement.querySelectorAll('li');
    listItems.forEach((item, index) => {
      if (index % 2 === 0) {
        this.renderer.addClass(item, 'new-class');
      } else {
        this.renderer.removeClass(item, 'new-class');
      }
    });
  }
}

li {
  --background-color: blue;
}

.new-class {
  --background-color: red;
}

<ul>
  <li *ngFor="let item of items" [style.backgroundColor]="shouldApplyNewClass(item) ? 'var(--background-color)' : 'blue'">
    {{ item }}
  </li>
</ul>