PrimeNg AutoComplete

Question

好的，我正在跟踪primeNg的文档，我无法获得自动完成来显示建议

1. 添加模块import { AutoCompleteModule } from 'primeng/autocomplete';
2. 导入模块imports: [CommonModule, FormsModule, AutoCompleteModule],
3. 我会展示我的代码

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}`);
  }
}

在primeNg文档中，它显示为

名称:建议类型:数组默认值:null描述:要显示的建议数组。

我试图以string[]和any[]类型发送数组，但没有成功。我希望你能帮我，非常感谢

Answer 1

第1期

由于您是通过superhero属性进行筛选，

不正确：

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

问题1的解决方案

变动如下：

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

第2期

在此函数中，您将返回一个字符串数组。在HTML中，应用field="name"，该field属性用于对象数组(参见PrimeNG / AutoComplete (对象部分))。

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

解决方案1用于第2期

返回filteredHeros阵列

cambiar() {
  return this.filteredHeros;
}

或

问题2的解决方案2

把filteredHeros传给[suggestions]。

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

基于StackBlitz的样品演示

Answer 2

尝试在filterHeros方法中使用形成层方法，如下所示

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();
  }

因为它只在加载时更新，所以我们还更新了(completeMethod)事件，以获得已过滤的数组。