Processing key and value of object using *ngFor in Angular

I am a stuck on how to get the key and value of an object in Angular while using *ngFor for iterating over the object.

Interface:

export interface CustomColumn {
[key: string]: boolean
}


AppComponent.ts

export class AppComponent {
service = inject(DataService);
displayedColumns: CustomColumn[];
respData = {} as ResponseData;
...

async fetchServiceDatails(criteria: string) {
await this.service.getDatails(criteria).subscribe({
next: (resp) => {
this.respData = resp;
if (this.respData && this.respData.data) {
this.displayedColumns = Object.entries(this.respData.data.entities).map(function (entry) {
let customColumn: CustomColumn = {};
customColumn = {
[entry]: true
};
return customColumn;
});
}
},
error: (e) => {
console.log('Error in fetching serviceDetails: ', e);
}
});
}
}


Here this.respData.data.entities contains:

{
"data": {
"entities": ["col1", "col2", "col3", ...],
...
}
}


AppComponent.html

<ul class="dropdown-menu checkbox-menu allow-focus" aria-labelledby="dropdownMenu2">
<li *ngFor="let item of displayedColumns | keyvalue">
<label>
<input type="checkbox" value="{{item.key}}"> {{item.key}}
</label>
</li>
</ul>


But what I am getting is [object Object] in the output:

• [object Object]
• [object Object]
• ...

Continue reading...