Property 'colName' does not exist on type 'Object'. app.GridComponent.ts(7, 27): Error occurs in the template of component GridComponent.

app.Grid.html

<table>
    <tr>
        <td *ngFor="let col of gridColumns">
           {{col.colName}}
        </td>
    </tr>
    <tr  *ngFor="let colObj of gridData">
       <td *ngFor="let col of gridColumns">
           {{colObj[col.colName]}}
       </td>
     <td>
        <a (click)="SelectGrid(colObj)" href= "">select</a>
     </td>
    </tr>
</table>

app.GridComponent.ts

import {Component,
        Input,
        Output,
EventEmitter} from  "@angular/core"
@Component({
    selector:"grid-ui",
    templateUrl:"./app.Grid.html"
})
export class GridComponent{
    //for columns names 
    gridColumns: Array<Object> = new Array<Object>
    //grid data
    gridData: Array<Object> = new Array<Object>
     @Input("grid_columns")
    set setGridColumns(_gridColumns:Array<Object>){
       this.gridColumns = _gridColumns;
    }
    @Input("grid_data")
    set setGridData(_gridData:Array<Object>){
        this.gridData = _gridData;
     }
    @Output("grid-selected")
     eventemitter: EventEmitter<Object> = new EventEmitter<Object>();

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

I want to use input output method in angular.

CodePudding user response：

Try to add interface and use it instead of type Object:

interface HasColName { colName: string }
    
@Component({
   selector:"grid-ui",
   templateUrl:"./app.Grid.html"
})
export class GridComponent{
  //for columns names 
  gridColumns: HasColName[] = [];
  ...

CodePudding user response：

try to replace Object type to any type

gridColumns: Array<any> = new Array<any>

gridData: Array<any> = new Array<any>

...