primeng dropdown not displaying values

Question

Is it necessary to map to labels and values in order to show values on dropdown ?

I'm trying to show enums on my dropdown but they are not displaying correctly !

  export enum nature
    {
        annuelle="Annuelle",
        semestrielle="Semestrielle",
        trimestrielle="Trimestrielle"

    }

 naturevalues = Object.values(nature);

 <div class="ui-grid-col-6">
                    <p-dropdown [options]="naturevalues"  formControlName="nature"></p-dropdown>
                </div>

I can see the chosen value on the console I tried to add optionLabel="value" but in vain

Answer 1

For those who come here from Google:

nature.enum.ts

export enum Nature {
   annuelle = "Annuelle",
   semestrielle = "Semestrielle",
   trimestrielle = "Trimestrielle"
}

In component.ts: define a list, where Nature is just an imported enum:

import {Nature} from 'enums/nature.enum';
//other imports

  public natures = Nature;

And in your template use keyvalue pipe and set optionLabel to value:

<div class="ui-grid-col-6">
    <p-dropdown [options]="natures | keyvalue" optionLabel="value" formControlName="nature"></p-dropdown>
</div>

Answer 2

Demo set to primeng options this

 naturevalues =   Object.keys(nature).map(key => ({ label: nature[key], value: key }));