Angular可复用表格组件无法接收传入数据问题排查

我是Angular新手，正在开发可复用表格组件。测试用的<label>能正常显示传入的columns数组值，但<p-table>的表头行始终不渲染。但把表格代码直接复制到调用页面时，表头却能正常显示。反复测试后仍搞不懂为什么数据能传到标签，却无法在表格中生效。

组件代码如下：

可复用组件HTML代码 #

<label [innerText]="columns[2]"></label>

<p-table [columns]="columns">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{col}}
            </th>
        </tr>
    </ng-template>
</p-table>

组件类代码 #

export class ReusableTableComponent implements OnInit {

  @Input() columns :string[]= [];

  ngOnInit(): void {
  }
}

问题原因及解决办法 #

• 核心问题：可复用组件所在的NgModule未导入PrimeNG的TableModule，导致<p-table>组件在子组件中无法正常初始化，表头模板因此不渲染。而原生<label>不受模块导入影响，所以能正常显示数据。
• 解决步骤：
  1. 在可复用组件所属的模块文件（比如reusable-table.module.ts）中导入TableModule：

     import { NgModule } from '@angular/core';
     import { CommonModule } from '@angular/common';
     import { TableModule } from 'primeng/table';
     import { ReusableTableComponent } from './reusable-table.component';
     
     @NgModule({
       declarations: [ReusableTableComponent],
       imports: [
         CommonModule,
         TableModule
       ],
       exports: [ReusableTableComponent]
     })
     export class ReusableTableModule { }
     

  2. 确保调用可复用组件的模块也导入了ReusableTableModule（如果是单独模块的话）。

额外验证点 #

• 确认传入的columns数组在组件初始化时已有值：可以在ngOnChanges钩子中打印columns，观察数据传递时机是否正确：

  import { SimpleChanges } from '@angular/core';
  
  // 组件类中添加
  ngOnChanges(changes: SimpleChanges): void {
    if (changes['columns']) {
      console.log('columns changed:', changes['columns'].currentValue);
    }
  }
  

• 检查p-table的columns绑定是否正确：确保组件类的@Input() columns确实接收到了非空数组。

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