Angular中@Input属性无法获取HTML传入值的问题

1. 修正组件选择器不匹配问题 #

你的子组件类是SkillsComponent，但父组件中使用的标签是<app-skill-bar>，必须确保子组件的@Component装饰器里的selector与父组件使用的标签完全一致：

@Component({
  selector: 'app-skill-bar', // 这里要和父组件的<app-skill-bar>对应
  templateUrl: './skills.component.html',
  styleUrls: ['./skills.component.css']
})
export class SkillsComponent {
  @Input() testfield = "";
}

2. 修复子组件模板的结构错误 #

你的skills.component.html开头缺失了<div>标签，导致模板结构无效，补全后才能正常渲染：

<div style="padding: 0 10%" class="row align-items-center">
  <p id="skill"
     class="col-2"
     style="font-family: Mulish-Bold, serif; font-size: 1.2rem; text-align: end;"
  >
    {{testfield}}
  </p>
  <p class="col-7" id="bar">
    <ngb-progressbar
      type="success"
      [value]="50">
    </ngb-progressbar>
  </p>
</div>

3. 确认组件的模块配置正确 #

• 如果是独立组件：在父组件的imports数组中添加SkillsComponent
• 如果是NgModule：确保SkillsComponent在所在模块的declarations数组中；若父组件属于另一个模块，还要将SkillsComponent所在模块添加到父模块的imports数组，或直接在所在模块的exports数组中导出SkillsComponent

4. 验证Input绑定的大小写一致性 #

当前代码中testfield全小写，父组件的testfield="Android"与子组件的@Input() testfield = ""命名一致，这部分没问题；若后续使用驼峰命名（如testField），父组件需对应使用短横线形式test-field="Android"

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