None of the answers here worked for me out of the box, here is what worked for me:
Create pipes/keys.ts with contents:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'keys'})
export class KeysPipe implements PipeTransform
{
transform(value:any, args:string[]): any {
let keys:any[] = [];
for (let key in value) {
keys.push({key: key, value: value[key]});
}
return keys;
}
}
Add to app.module.ts (Your main module):
import { KeysPipe } from './pipes/keys';
and then add to your module declarations array something like this:
@NgModule({
declarations: [
KeysPipe
]
})
export class AppModule {}
Then in your view template you can use something like this:
<option *ngFor="let entry of (myData | keys)" value="{{ entry.key }}">{{ entry.value }}</option>
Here is a good reference I found if you want to read more.