如何使用父/子组件通过NgFor将NgClass应用于单次迭代？

// 父组件
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <div *ngFor="let item of items">
      <app-child [data]="item"></app-child>
    </div>
  `,
})
export class ParentComponent {
  items: any[] = [
    { name: 'Item 1', isActive: true },
    { name: 'Item 2', isActive: false },
    { name: 'Item 3', isActive: true },
  ];
}

// 子组件
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <div [ngClass]="{ 'active': data.isActive }">
      {{ data.name }}
    </div>
  `,
  styles: [
    `
    .active {
      color: blue;
    }
    `,
  ],
})
export class ChildComponent {
  @Input() data: any;
}