Angular项目创建CDK Table遇NG8001/NG8002错误，求解决方案

看起来你遇到的问题是模块封装导致的——你的BrandsComponent属于DisplayModule，但你只在根模块AppModule中导入了CdkTableModule，Angular的子模块不会自动继承父模块的依赖，所以DisplayModule无法识别cdk-table相关的指令和输入属性。

下面是具体的修复步骤：

1. 在DisplayModule中导入CdkTableModule #

打开你的display-page.module.ts文件，添加CdkTableModule的导入，并把它加入到模块的imports数组中：

import { NgModule } from '@angular/core';
// 导入CdkTableModule
import { CdkTableModule } from '@angular/cdk/table';
// 导入你的BrandsComponent（确保它已经在declarations里）
import { BrandsComponent } from './brands/brands.component';

@NgModule({
  declarations: [
    BrandsComponent,
    // 其他组件...
  ],
  imports: [
    CdkTableModule,
    // 其他需要的模块...
  ]
})
export class DisplayModule { }

2. 确认组件内dataSource和displayedColumns的定义 #

确保你的BrandsComponent类中正确初始化了dataSource和displayedColumns属性，比如：

import { Component } from '@angular/core';

export interface PeriodicElement {
  position: number;
  name: string;
  weight: number;
  symbol: string;
}

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
];

@Component({
  selector: 'app-brands',
  templateUrl: './brands.component.html',
  styleUrls: ['./brands.component.css']
})
export class BrandsComponent {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = ELEMENT_DATA;
}

3. 检查模块声明 #

确认BrandsComponent已经被正确添加到DisplayModule的declarations数组中——如果组件没有被所在模块声明，也会导致类似的识别错误。

完成这些步骤后，Angular就能正确识别cdk-table组件和它的dataSource输入属性了，错误应该会被消除。

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