Angular中使用硬编码数组填充PrimeNG Table无渲染无报错问题咨询

问题根因 #

1. ngOnInit中声明的columns是局部变量，没有赋值给类成员变量this.columns，导致模板绑定的columns一直是初始化的空数组，表头和单元格都没有循环渲染的数据源，这是无报错但无内容的核心原因。
2. 类成员columns类型是Column[]，需要包含field（对应tasks数组的属性名）和header（表头显示名）两个核心属性，你原本写的是纯字符串数组，不符合模板读取col.field、col.header的逻辑。
3. 额外注意：如果类中没有定义refresh()方法，后续点击刷新按钮会报错，不过该问题不影响当前表格渲染。

修复方案 #

仅需修改component.ts的ngOnInit部分代码即可：

// 顶部确认导入Column接口，没有导入的话也可以自行定义对应结构
import { Column } from 'primeng/api';
// 自行定义的写法参考：interface Column { field: string; header: string; }

// ...其余原有代码保留，仅修改ngOnInit逻辑
ngOnInit() {
    // 赋值给类成员变量，结构符合Column类型要求
    this.columns = [
        { field: 'id', header: 'Id' },
        { field: 'name', header: 'Name' },
        { field: 'start', header: 'Start' },
        { field: 'end', header: 'End' },
        { field: 'progress', header: 'Progress' },
        { field: 'dependencies', header: 'Dependencies' }
    ];
}

修改完成后刷新页面即可正常渲染硬编码的tasks数据。

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