title: PrimeNg AutoComplete
body: <p>Well I'm following the documentation of primeNg and I can't get the autocomplete to show the suggestions</p>
  <ol>
  <li>Added Module
  <code>import { AutoCompleteModule } from 'primeng/autocomplete';</code></li>
  <li>Imported Module
  <code>imports: [CommonModule, FormsModule, AutoCompleteModule],</code></li>
  <li>I will show my code</li>
  </ol>
  <pre><code>my file .html shows this 
  
  &lt;div fxLayout=&quot;column&quot;&gt;
      &lt;div&gt;
          &lt;h1&gt;Buscador de Héroes&lt;/h1&gt;
          &lt;p-divider&gt;&lt;/p-divider&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;p-autoComplete  [(ngModel)]=&quot;selectedHero&quot; [suggestions]=&quot;cambiar()&quot; (completeMethod)=&quot;filterHeros($event)&quot; field=&quot;name&quot; [minLength]=&quot;1&quot;&gt;&lt;/p-autoComplete&gt;     
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  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 =&gt;  this.heroes = heroes );
    }
    
    selectedHero!: Heroe;
  
    heroes:Heroe[] = [];
  
    filteredHeros:Heroe[] = [];
  
    filterHeros(event:any){
      let filtered : Heroe[]= [];
      let query = event.query;
      for (let i = 0; i &lt; 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 &lt; 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&lt;Heroe[]&gt; {
      return this.http.get&lt;Heroe[]&gt;(`${ this.baseUrl }/heroes`)
    }
  
    getHeroesPorId(id:string):Observable&lt;Heroe&gt; {
      return this.http.get&lt;Heroe&gt;(`${ this.baseUrl }/heroes/${id}`);
    }
  }
  
  </code></pre>
  <p>In the primeNg documentation it appears as <br></p>
  <p>name:suggestions    Type:array   Default:null   Description:An array of suggestions to display.</p>
  <p>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</p>