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

在Angular中，可以使用父/子组件结合NgFor指令和NgClass指令来将NgClass应用于单次迭代。下面是一个完整的解答：

父组件中，首先需要定义一个数组，用于存储要迭代的数据。然后，在模板中使用NgFor指令来迭代数组，并将每个元素传递给子组件。

// 父组件
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 },
  ];
}

在子组件中，接收父组件传递的数据，并使用NgClass指令来根据数据的isActive属性应用不同的样式。

// 子组件
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;
}

在上述代码中，父组件通过NgFor指令迭代items数组，并将每个元素传递给子组件。子组件接收到数据后，使用NgClass指令来根据isActive属性判断是否应用active样式。

这样，父/子组件结合NgFor和NgClass指令，可以实现根据数据动态应用样式的效果。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云数据库MySQL。