通过循环Angular向子组件传递数据

Question

我需要将数据从父组件中的数组传递到子组件，并为数组中的每个元素创建子组件并在其中传递数据。

这是我的父组件：

@Component({
  selector: 'app-profile-card',
  standalone: true,
  imports: [
    SkillTagComponent
  ],
  templateUrl: './profile-card.component.html',
  styleUrl: './profile-card.component.scss'
})
export class ProfileCardComponent {
  skillTypes: string[] = ['angular', 'JS', 'CSS', 'HTML']
}

我尝试循环并传递数据的父组件模板部分：

<div class="profile-card__tags">
    <app-skill-tag *ngFor="let skill of skillTypes"
        [skillType]="skill"></app-skill-tag>
</div>

子组件：

@Component({
  selector: 'app-skill-tag',
  standalone: true,
  imports: [
    CommonModule,
  ],
  templateUrl: './skill-tag.component.html',
  styleUrl: './skill-tag.component.scss',
})
export class SkillTagComponent {
  @Input() skillType: string = ''
}

子组件模板：

<div class="skill-tag">
    {{skillType}}
</div>

所以我试图循环

skillTypes

并为其中的每个

skill

创建

app-skill-tag

组件并将数据从

skill

变量传递到

app-skill-tag

，但这不起作用。

Answer 1

您必须添加

CommonModule

或

NgFor

的导入才能使 for 循环开始工作。

@Component({
  selector: 'app-profile-card',
  standalone: true,
  imports: [
    SkillTagComponent,
    CommonModule,
  ],
  templateUrl: './profile-card.component.html',
  styleUrl: './profile-card.component.scss'
})
export class ProfileCardComponent {
  skillTypes: string[] = ['angular', 'JS', 'CSS', 'HTML']
}