Options not displaying in primeng Dropdown?

Question

I'm trying load values in dropdown using primeng theme. Here is documentation of dropdown primeng:

https://www.primefaces.org/primeng/#/dropdown

I want put values wihout using ngfor, because in model of documentation I see can be possible do it, I receive a array of this json object:

 {
            "$id": 1,
            "@xdata.type": "XData.Default.Grupo",
            "Id": 2,
            "Descricao": "Tributada para Comercialização",
            "EstoqueMin": 5,
            "EstoqueMax": 20,
            "Iat": "A",
            "Ippt": "T",
            "Ncm": "28220010",
            "Validade": 0,
            "PercentualLucro": 50,
            "PercentualDesconto": 5,
            "PercentualComissao": 5,
            "NrCaracterCodInterno": 7,
            "TipoProduto": 0,
            "Foto": null,
            "ItemSped": "00",
            "[email protected]": "Grupo(2)/IdGrupoTributario",
            "[email protected]": "Grupo(2)/IdUnidadeProduto",
            "[email protected]": "Grupo(2)/IdSecao",
            "[email protected]": "Grupo(2)/IdCategoria",
            "[email protected]": "Grupo(2)/IdSubCategoria",
            "[email protected]": "Grupo(2)/IdMarca"
        }

I want show the description, and caputure id in value.

my code is this:

   <div class="ui-g-12 ui-md-6">
    <p-dropdown [options]="grupoList.Descricao" placeholder="Grupo" formControlName="IdGrupo" [autoWidth]="false" value="grupoList.Id"></p-dropdown>
    </div>

but not show nothing

if I do it:

   <div class="ui-g-12 ui-md-6">
       <p-dropdown [options]="grupoList" placeholder="Grupo" formControlName="IdGrupo" [autoWidth]="false"></p-dropdown>
   </div>

I have blank options of numbers array size, but I cant show the description

@EDIT

the code not work...

my ts file:

this.produtoAgilService.listarGrupo().subscribe(res=>{
      for(let i in res){
        this.grupoList.push(res[i])
      }
      this.grupoList.map(x =>({
        label: x.Descricao,
      value: x.Id
    }))

my html file:

<p-dropdown [options]="grupoList" placeholder="Grupo" formControlName="IdGrupo" [autoWidth]="false">
              <ng-template let-item pTemplate="selectedItem"> 
                <b>{{item.Descricao}}</b> <!-- highlighted selected item -->
              </ng-template> 
              <ng-template let-item pTemplate="item"> 
                {{item.Descricao}}
              </ng-template>
            </p-dropdown>

Do you receive array of objects or single object as a result? — Chellappan வ

Daniel Gimenez Daniel Gimenez · Accepted Answer · 2018-07-20T17:13:27

There are two ways to handle this situation, you either have to map your array to an array of objects with members label and value, or you need to do your own custom template.

Map Method

There should be no reason to change your HTML. Just do a map after getting the values for your list.

class MyComponent {
  grupoList = [];

  ngOnInit() {
    this.grupoList = this.somefunctionToGetValueArray().map(x => ({
      label: x.Descricao,
      value: x.$id
    }));
  }
}

Template Method

This method you create ng-templates in your drop down for the item options. With this method you shouldn't have to change your code.

<p-dropdown [options]="grupoList" placeholder="Grupo" formControlName="IdGrupo" [autoWidth]="false">
  <ng-template let-item pTemplate="selectedItem"> 
    <b>{{item.Descricao}}</b> <!-- highlighted selected item -->
  </ng-template> 
  <ng-template let-item pTemplate="item"> 
    {{item.Descricao}}
  </ng-template>
</p-dropdown>

Options not displaying in primeng Dropdown?

1 Answers