Property 'Object' does not exist on type 'FoldersPage'

Question

With the help of *ngFor directive, I'm iterating through an array of objects and trying to render first key of each object on the layout. But I'm facing this error:

Property 'Object' does not exist on type 'FoldersPage'

Here's my code:

<ion-list>
   <ion-item *ngFor="let folder of folders" (click)="open(folder)">
      <ion-label>
        <h1>{{ Object.keys(folder)[0] }}</h1>  // Error line
        <p>31 tasks</p>
      </ion-label>
      <ion-icon (click)="edit(folder);$event.stopPropagation()" slot="end" name="pencil"></ion-icon>
      <ion-icon (click)="delete(folder);$event.stopPropagation()" slot="end" name="trash"></ion-icon>
    </ion-item>
</ion-list>

How to solve this error? Or if it's not possible this way than is there any other better alternative approach?

Thanks.

Answer 1

Inorder to use Object.keys(folder)[0] in template, call a function from template and from that function defenition return the keys.

In Template

{{ getKeys(folder)[0] }}

And in component.ts

getKeys(obj) {
  return Object.keys(obj);
};