Angular父组件向子组件传递下拉框选中值编译失败如何解决

核心问题排查 #

你遇到的编译错误基本由以下两个遗漏配置导致：

1. 父组件未声明name属性 #

你在app.component.html的下拉框change事件里直接给name赋值，同时将name作为参数传给子组件，但你没有在app.component.ts的组件类中声明name变量，Angular模板变量必须在对应组件类中声明才能使用。
修复方案：在app.component.ts中补充name变量声明：

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // 新增此行，声明模板中用到的name变量
  public name = '';
}

2. 根模块未注册子组件 #

使用自定义组件标签<app-hello>之前，必须先在当前模块的declarations数组中注册该组件，否则Angular无法识别自定义标签，会直接报编译错误。
修复方案：打开app.module.ts，补充HelloComponent的导入和注册：

// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
// 按你实际的文件路径导入HelloComponent
import { HelloComponent } from './hello.component';

@NgModule({
  declarations: [
    AppComponent,
    // 新增此行，注册子组件
    HelloComponent
  ],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

可选优化（规避后续运行时警告） #

你当前的代码逻辑本身可以正常运行，但有两处可以优化避免严格模式下的警告：

1. 子组件输入属性指定明确类型，替换any为更安全的字符串类型：

// hello.component.ts
@Input() 
cName: string = '';

2. 子组件模板避免重复写*ngIf，使用ng-container包裹循环逻辑，同时避免同一元素上使用多个结构型指令：

<!-- hello.component.html 修改tbody部分 -->
<tbody>
  <ng-container *ngFor="let c of courses">
    <tr *ngIf="c.courseName == cName">
      <td>{{c.courseId}}</td>
      <td>{{c.courseName}}</td>
    </tr>
  </ng-container>
</tbody>

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