Angular中通过循环向子组件传递数据失败问题求助

你的代码逻辑本身是正确的，但有一个容易忽略的点导致循环不生效：父组件作为独立组件，使用*ngFor指令需要导入CommonModule。

具体修复步骤 #

修改父组件的imports数组，加入CommonModule：

@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']
}

其他可能的排查方向 #

如果修复后还是有问题，可以检查以下几点：

• 查看浏览器控制台是否有报错信息，比如输入属性拼写错误、组件未正确声明等
• 确认子组件的@Input()装饰器是否从@angular/core正确导入
• 检查父组件模板中*ngFor的语法是否正确，比如变量名是否和组件中的数组名一致

内容的提问来源于stack exchange，提问作者Dmytro