Angular报错：无法绑定'app-products-card'的未知属性'product'如何解决？

API 探路者

2026-10-3

问题原因

该报错本质是Angular无法识别子组件app-products-card的product输入属性，和你已经导入的BrowserModule、ReactiveFormsModule无关，按以下步骤排查解决：

解决步骤

第一步：给ProductsCardComponent声明@Input()输入属性
你仅提供了产品卡片组件的模板代码，缺失ts文件的输入属性声明，这是最常见的触发原因。打开products-card.component.ts，添加如下代码：

import { Component, Input } from '@angular/core';
import { IProducts } from '你的IProducts类型定义路径';

@Component({
  selector: 'app-products-card',
  templateUrl: './products-card.component.html'
})
export class ProductsCardComponent {
  // 必须加@Input()装饰器才能接收父组件传值
  @Input() product!: IProducts;
  // 其余已有的逻辑：stateService注入、isAddToCartBtnClicked、amount变量声明保持不变
}

第二步：检查模块的declarations配置
你贴出的NgModule配置缺失declarations字段，必须把用到的组件都注册到模块中：

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProductsCardComponent // 必须注册子组件
  ],
  imports: [
    // 原有导入保持不变
    BrowserModule,
    ReactiveFormsModule,
    RoutingModule,
    BrowserAnimationsModule,
    MDBBootstrapModule.forRoot(),
    HttpClientModule,
    FormsModule,
    TableModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

如果ProductsCardComponent定义在其他子模块中，还需要在子模块的exports数组里导出该组件，再在HomeComponent所在模块的imports中引入对应子模块。