PrimeNg 自动完成

Question

好吧，我正在关注 primeNg 的文档，但我无法让自动完成功能显示建议

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

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 文档中它显示为

name:suggestions Type:array Default:null Description:An 要显示的建议数组。

我尝试将数组作为类型 string[] 和任何类型 [] 发送，但没有成功。希望大家能帮帮我，非常感谢

Answer 1

尝试在 filterHeros 方法中使用 cambiar 方法，像这样，

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) 事件以取回过滤后的数组

Answer 2

第 1 期

因为您是按 superhero 属性,

过滤

不正确：

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

问题 1 的解决方案

修改如下：

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

第 2 期

在此函数中，您将返回一个字符串数组。在 HTML 中，您应用 field="name"，此 field 属性与对象数组一起使用（请参阅 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;
}

问题 2 的解决方案 1

Return filteredHeros数组

cambiar() {
  return this.filteredHeros;
}

或

问题 2 的解决方案 2

将 filteredHeros 传递给 [suggestions]。

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

Sample Demo on StackBlitz

PrimeNg 自动完成

PrimeNg AutoComplete

angular

typescript

autocomplete

primeng