Передача масcива обьектов в комопнент и работа с ним Angular 18

есть клас CollectionsHomeComponent

export class CollectionsHomeComponent {
  data = [
    { name: 'James', age: 24, job: 'Designer' },
    { name: 'Jill', age: 26, job: 'Engineer' },
    { name: 'Elyse', age: 25, job: 'Engineer' }
  ];

  headers = [
    { key: 'name', label: 'Name'},
    { key: 'age', label: 'Age'},
    { key: 'job', label: 'Job'}
  ];

  constructor() {}
}

CollectionsHomeComponent html

<app-table [data]="data" [headers]="headers"></app-table>

и второй класс который создает таблицу table.component.ts

@Component({
  selector: 'app-table',
  standalone: true,
  imports: [],
  templateUrl: './table.component.html',
  styleUrl: './table.component.css'
})
export class TableComponent {
  @Input() data:{}[] = [];
  @Input() headers:{}[] = [];

  constructor(){}
}

table.component.html

<table>
    <thead>
        <tr>
        @for (header of headers; track $index) {
            <th scope="col">{{header.label}}</th>
        } 
        </tr>
    </thead>
</table>

тут я хочу вывести header.label, но ругается что не знает что такое label. Это логично вроде, но как правильно это все прописать и работать с таким массивом?

Property 'label' does not exist on type '{}'.ngtsc(2339) table.component.ts(7, 15): Error occurs in the template of component TableComponent