PrimeNg 自动完成

Question

Well I'm following the documentation of primeNg and I can't get the autocomplete to show the suggestions

1. Added Module import { AutoCompleteModule } from 'primeng/autocomplete';
2. Imported Module imports: [CommonModule, FormsModule, AutoCompleteModule],
3. I will show my code

my file .html shows this 

<div fxLayout="column">
    <div>
        <h1>Buscador de Héroes</h1>
        <p-divider></p-divider>
    </div>
    <div>
        <p-autoComplete  [(ngModel)]="selectedHero" [suggestions]="cambiar()" (completeMethod)="filterHeros($event)" field="name" [minLength]="1"></p-autoComplete>     
    </div>

</div>

my file component show this

import { Component, OnInit } from '@angular/core';
import { Heroe } from '../../interface/heroes.interface';
import { HeroesService } from '../../services/heroes.service';


@Component({
  selector: 'app-buscar',
  templateUrl: './buscar.component.html',
  styles: [
  ]
})
export class BuscarComponent implements OnInit {

  constructor(private heroesService: HeroesService) { }

  ngOnInit(): void {
    this.heroesService.getHeroes()
      .subscribe(heroes =>  this.heroes = heroes );
  }
  
  selectedHero!: Heroe;

  heroes:Heroe[] = [];

  filteredHeros:Heroe[] = [];

  filterHeros(event:any){
    let filtered : Heroe[]= [];
    let query = event.query;
    for (let i = 0; i < this.heroes.length; i++) {
      let heroe = this.heroes[i];
      if (heroe.superhero.toLowerCase().indexOf(query.toLowerCase()) == 0) {
        filtered.push(heroe);
      }
    }
    this.filteredHeros = filtered;
    console.log(this.filteredHeros);  // When I print this to the console I can see the 
 // search results in the console, however I can't get them to show up in the autocomplete
  }

  cambiar(){
    let mostrar:any[] = [];
    for (let i = 0; i < this.filteredHeros.length; i++){
      mostrar[i] = this.filteredHeros[i].superhero
    }
    return mostrar;
  }

}

and my service

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { environment } from 'src/environments/environment';
import { Heroe } from '../interface/heroes.interface';


@Injectable({
  providedIn: 'root'
})
export class HeroesService {

  private baseUrl: string = environment.baseUrl;

  constructor(private http: HttpClient) { }

  getHeroes():Observable<Heroe[]> {
    return this.http.get<Heroe[]>(`${ this.baseUrl }/heroes`)
  }

  getHeroesPorId(id:string):Observable<Heroe> {
    return this.http.get<Heroe>(`${ this.baseUrl }/heroes/${id}`);
  }
}

In the primeNg documentation it appears as

name:suggestions Type:array Default:null Description:An array of suggestions to display.

I have tried to send the array as type string[] and as any[] but without success. I hope you can help me thank you very much

Answer 1

try using cambiar method inside the filterHeros method, like this,

filterHeros(event:any){
    let filtered : Heroe[]= [];
    let query = event.query;
    for (let i = 0; i < this.heroes.length; i++) {
      let heroe = this.heroes[i];
      if (heroe.superhero.toLowerCase().indexOf(query.toLowerCase()) == 0) {
        filtered.push(heroe);
      }
    }
    this.filteredHeros = filtered;
    this.cambiar();
  }

Because it is updated only on load, we have updated on (completeMethod) event also to get back filtered array

Answer 2

Issue 1

Since you are filtering by superhero property,

Incorrect:

<p-autoComplete  
    ...
    field="name">
</p-autoComplete>

Solution for Issue 1

Change as below:

<p-autoComplete  
    ...
    field="superhero">
</p-autoComplete>

---

Issue 2

While in this function, you are returning a string array. While in HTML, you apply field="name" , which this field attribute is worked with object array (Refer to PrimeNG | AutoComplete (Object section) ).

cambiar(){
  let mostrar:any[] = [];
  for (let i = 0; i < this.filteredHeros.length; i++){
    mostrar[i] = this.filteredHeros[i].superhero
  }
  return mostrar;
}

Solution 1 for Issue 2

Return filteredHeros array

cambiar() {
  return this.filteredHeros;
}

OR

Solution 2 for Issue 2

Pass filteredHeros to [suggestions] .

<p-autoComplete
    ...
    [suggestions]="filteredHeros">
</p-autoComplete>

Sample Demo on StackBlitz