angular with prime ng autocomplete not work

Question

I'm trying to use autocomplete advanced of PrimeNG. See below the image and link of documentation:

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

if I copy and paste the theme code from PrimeNG tutorial, it works well, like below:

HTML file:

  <p-autoComplete id="acAdvanced" [(ngModel)]="selectedBrands" [suggestions]="filteredBrands" (completeMethod)="filterBrands($event)" [size]="30"
                        [minLength]="1" [dropdown]="true" multiple="true">
                        <ng-template let-brand pTemplate="item">
                            <div class="ui-helper-clearfix">
                                <img src="assets/demo/images/car/{{brand}}.gif" style="width:32px;display:inline-block;margin:5px 0 2px 5px"/>
                                <div style="font-size:18px;float:right;margin:10px 10px 0 0">{{brand}}</div>
                            </div>
                        </ng-template>
                    </p-autoComplete>

TS file:

brands: string[] = ['Audi', 'BMW', 'Fiat', 'Ford', 'Honda', 'Jaguar', 'Mercedes', 'Renault', 'Volvo', 'Volkswagen'];

    filteredBrands: any[];

    selectedBrands: string[];

filterBrands(event) {
        this.filteredBrands = [];
        for (let i = 0; i < this.brands.length; i++) {
            const brand = this.brands[i];
            if (brand.toLowerCase().indexOf(event.query.toLowerCase()) === 0) {
                this.filteredBrands.push(brand);
            }
        }
    }

But I need to receive an array of JSON object, show it and filter by description and the value selected needs to be an ID. If I put only the array of string value, like in the tutorial, it works! However it has a lot of whitespaces. If I filter to show and filter json object it not work.

My code:

HTML file:

<p-autoComplete id="acAdvanced" [suggestions]="grupoListFiltrado.Descricao" (completeMethod)="filtrarGrupo($event)" [size]="30" formControlName="IdGrupo"
[minLength]="1" [dropdown]="true" multiple="true">
<ng-template let-grupo pTemplate="item">
    <div cla9ss="ui-helper-clearfix">
        <div style="font-size:18px;float:left;margin:10px 10px 0 0">{{grupo}}</div>
    </div>
</ng-template>
</p-autoComplete>

TS file:

 grupoListFiltrado: any[];
  public grupoList: any[];


this.produtoAgilService.listarGrupo().subscribe(res=>{
      for(let i in res){
        this.grupoList.push(res[i])
      }
    }

filtrarGrupo(event) {
  this.grupoListFiltrado = [];
  for (let i = 0; i < this.grupoList.length; i++) {
      const grupo = this.grupoList[i];

      if (grupo.Descricao.toLowerCase().indexOf(event.query.Descricao) === 0) {
          this.grupoListFiltrado.push(grupo);
      }
    }
  }

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",
            "IdGrupoTributario@xdata.proxy": "Grupo(2)/IdGrupoTributario",
            "IdUnidadeProduto@xdata.proxy": "Grupo(2)/IdUnidadeProduto",
            "IdSecao@xdata.proxy": "Grupo(2)/IdSecao",
            "IdCategoria@xdata.proxy": "Grupo(2)/IdCategoria",
            "IdSubCategoria@xdata.proxy": "Grupo(2)/IdSubCategoria",
            "IdMarca@xdata.proxy": "Grupo(2)/IdMarca"
        }

I have confirmed in log that I received an array of 16 itens

Why it is now being showed, how can I do it?

Answer 1

The [suggestions] tag must reference an Object and not the property of this.

    <p-autoComplete id="acAdvanced" [suggestions]="grupoListFiltrado" (completeMethod)="filtrarGrupo($event)" [size]="30" formControlName="IdGrupo" [minLength]="1" [dropdown]="true" multiple="true">
      <ng-template let-grupo pTemplate="item">
        <div cla9ss="ui-helper-clearfix">
            <div style="font-size:18px;float:left;margin:10px 10px 0 0">{{grupo}}     </div>
        </div>
      </ng-template>
    </p-autoComplete>

The autocomplete awaits for an array of string, so you must push just the string and not the entire group.

The comparison with the text input should be done with 'event.query' only. There is not '.Descricao' here.

I suggest to use the startsWith instead of indexOf.

filtrarGrupo(event) {
  this.grupoListFiltrado = [];
  for (let i = 0; i < this.grupoList.length; i++) {
      const grupo = this.grupoList[i];

      if (grupo.Descricao.toLowerCase().startsWith(event.query) === 0) {
          this.grupoListFiltrado.push(grupo.Descricao);
      }
  }
}