为*ngFor中的每个元素添加背景色

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items = [
    { name: 'Item 1', status: 'active' },
    { name: 'Item 2', status: 'inactive' },
    { name: 'Item 3', status: 'pending' }
  ];
}

<!-- app.component.html -->
<ul>
  <li *ngFor="let item of items" [style.backgroundColor]="getStatusColor(item.status)">
    {{ item.name }} - {{ item.status }}
  </li>
</ul>

// 在组件类中添加方法来返回对应状态的颜色
getStatusColor(status: string): string {
  switch (status) {
    case 'active':
      return 'green';
    case 'inactive':
      return 'red';
    case 'pending':
      return 'yellow';
    default:
      return 'white';
  }
}