Question

我正在使用PokéAPi创建一个Angular应用程序，可以帮助我列出所有的神奇宝贝。

我想添加一个搜索区域，以便我们从列表中按其名字找到一个神奇宝贝。

我尝试使用Pipe＆filter，但无法正常工作。

这是我的component.html代码：

  <h1>Pokédex Application using Angular </h1>
   <span>Voici le listing des Pokemons</span>
  <input [(ngModel)]="searchText" placeholder="search text goes here">


 <div class="pokedex">
  <div class="pokedex-pokemon" *ngFor="let p of pokemon | filter : 
  searchText">
  <div class="pokedex-pokemon-id">
  #{{ p.id}}
   </div>
    <img [ngClass]="{'hidden': !p.imageLoaded}" class="pokedex-pokemon- 
 sprite" (load)="p.imageLoaded = true" [attr.src]="p.sprite">
<div class="pokedex-pokemon-name">
  {{ p.name | capitalize }}
 </div>
 </div>
</div>
 <button class="load-button" (click)="loadMore()" [disabled]="isLoading">
 <span *ngIf="!error">
 <span *ngIf="isLoading">Plus...</span>
 <span *ngIf="!isLoading">Plus</span>
 </span>
  <span *ngIf="error">
 Erreur de chargement
  </span>
 </button>

我的能力

 import { Component } from '@angular/core';

 import { PokedexService } from './pokedex.service';
 import { Pokemon } from './pokemon';

 @Component({
  selector: 'app-root',
 templateUrl: 'app.component.html',
 styleUrls: ['app.component.css']
 })
export class AppComponent {
 pokemon: Pokemon[] = [];
 isLoading: boolean ;
 error: boolean ;

 constructor(private pokedexService: PokedexService) { }

 ngOnInit() {
this.loadMore();
}
loadMore() {
this.isLoading = true;

this.pokedexService.getPokemon(this.pokemon.length, 9)
  .then(pokemon => {
    pokemon = pokemon.map(p => {
      p.imageLoaded = false;
      return p;
    });
    this.pokemon = this.pokemon.concat(pokemon);
    this.isLoading = false;
    this.error = false;
  })
  .catch(() => {
    this.error = true;
    this.isLoading = false;
  });
  }
  }

和filter.pipe.ts

  import { Pipe, PipeTransform } from '@angular/core';
 @Pipe({
name: 'filter'
 })
 export class FilterPipe implements PipeTransform {
transform(items: any[], searchText: string): any[] {
    if(!items) return [];
    if(!searchText) return items;
    searchText = searchText.toLowerCase();
    return items.filter( it => {
        return it.toLowerCase().includes(searchText);
    });
     }
   }

以下是我浏览器中的概述：您能帮我发现问题出在哪里以及如何解决该问题，因为搜索无法正常工作吗？

Answer 1

您正在过滤整个对象而不是它的属性。尝试类似的事情：

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'filter'
})
export class FilterPipe implements PipeTransform {
  transform(items: any[], searchText: string): any[] {
    if (!items) return [];
    if (!searchText) return items;
    searchText = searchText.toLowerCase();
    return items.filter(it => {
      let hit = false;
      const keys = Object.keys(it);
      for (const key of keys) {
        if (typeof it[key] === 'string') {
          const property = it[key] as string;
          if (property.toLowerCase().includes(searchText)) {
            hit = true;
            break;
          }
        }
      }
      return hit;
    });
  }
}

这是一个有效的示例：https://stackblitz.com/edit/angular-ztn6by

通过角度的适当属性搜索

1 个答案: