Angular中类型‘Object’不存在‘colName’属性的报错解决咨询

报错原因 #

TypeScript是强类型语言，你将gridColumns和gridData声明为Array<Object>类型，但Object类型本身并没有colName属性。当模板中尝试访问col.colName时，TypeScript的类型检查机制会抛出这个错误。

解决方案 #

最规范的解决方式是通过定义TypeScript接口明确数据结构，既保留类型检查的优势，也能彻底消除报错。

1. 定义对应的数据接口

在app.GridComponent.ts中添加两个接口，分别描述列配置和表格数据的结构：

import {Component, Input, Output, EventEmitter} from  "@angular/core"

// 定义列配置接口，明确包含colName字段
interface GridColumn {
  colName: string;
  // 可根据需求添加其他字段，比如displayName（表头显示名称）等
}

// 定义表格数据项接口，用索引签名兼容任意字段
interface GridDataItem {
  [key: string]: any;
}

@Component({
    selector:"grid-ui",
    templateUrl:"./app.Grid.html"
})
// 后续组件代码

2. 修改组件中的类型声明

将原来的Array<Object>替换为刚定义的接口数组类型：

export class GridComponent{
    // 列配置
    gridColumns: Array<GridColumn> = new Array<GridColumn>();
    // 表格数据
    gridData: Array<GridDataItem> = new Array<GridDataItem>();
    
    @Input("grid_columns")
    set setGridColumns(_gridColumns:Array<GridColumn>){
       this.gridColumns = _gridColumns;
    }
    
    @Input("grid_data")
    set setGridData(_gridData:Array<GridDataItem>){
        this.gridData = _gridData;
     }
    
    @Output("grid-selected")
     eventemitter: EventEmitter<GridDataItem> = new EventEmitter<GridDataItem>();

    SelectGrid(_selected:GridDataItem){
        this.eventemitter.emit(_selected);
    }
}

临时替代方案（不推荐长期使用）

如果暂时不想定义接口，也可以通过类型断言绕过类型检查，但会失去TypeScript的类型安全保障：
在模板中将col断言为any类型：

<td *ngFor="let col of gridColumns">
   {{(col as any).colName}}
</td>
<td *ngFor="let col of gridColumns">
   {{colObj[(col as any).colName]}}
</td>

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