如何按类别过滤 API 调用中的数据并在 UI 中显示？答案

【问题标题】：How to Filter Data from an API call by Category and Display it in the UI?如何按类别过滤 API 调用中的数据并在 UI 中显示？
【发布时间】：2020-09-01 07:32:29
【问题描述】：

我正在尝试按类别检索数据，按 generation 特定于 Pokemon API，并将所有 pokemon 物种检索到它在选项列表中选择的那一代，但我'我很难做到这一点。我已经可以在控制台日志中获得口袋妖怪种类的数组，但我无法在我的视图中实现它。任何可以帮助我的人。谢谢！

这是我用于按代获取物种的方法：

  getPokeGenerationSpecies(id) {
    return this.http.get(`${this.baseUrl}/generation/7`).pipe(
      map((poke) => {
        let id = Object.keys(poke["id"]);
        poke["id"] = id.map((idKey) => poke["id"][idKey]).filter((id) => id);
        return poke;
      })
    );
  }

正如您在上面看到的，我只是将索引值硬编码为 7，但我真正想要的是在选择世代号时动态获取它。

这是我在控制台登录的内容：

在这里，我想访问所有 pokemon_species 列表并将其全部显示在我的视图中。

这是我试图动态实现的界面：

但我只是在这里硬编码数据：

  <h4>POKÉDEX</h4>
  <ion-card-subtitle> Search by generation. </ion-card-subtitle>
  <ion-item>
    <ion-label>Select</ion-label>
    <ion-select (ionChange)="onChange($event)">
      <ion-select-option [value]="1">Generation 1</ion-select-option>
      <ion-select-option [value]="2">Generation 2</ion-select-option>
      <ion-select-option [value]="3">Generation 3</ion-select-option>
      <ion-select-option [value]="4">Generation 4</ion-select-option>
      <ion-select-option [value]="5">Generation 5</ion-select-option>
      <ion-select-option [value]="6">Generation 6</ion-select-option>
      <ion-select-option [value]="7">Generation 7</ion-select-option>
    </ion-select>
  </ion-item>
  <!-- <ion-list-header>Generation {{""}}</ion-list-header>
  <ion-list>
    <ion-item>... list of species of selected generation here</ion-item>
  </ion-list> -->
</div>
<ion-content>
  <ion-list>
    <h5>Generation 1</h5>
      <ion-item>
        <ion-label><b>Charmander</b></ion-label>
      </ion-item>
      <ion-item>
        <ion-label><b>Pikachu</b></ion-label>
      </ion-item>
      <ion-item>
        <ion-label><b>Bulbazour</b></ion-label>
      </ion-item>
      <ion-item>
        <ion-label><b>Pichu</b></ion-label>
      </ion-item>
      <ion-item>
        <ion-label><b>Salamander</b></ion-label>
      </ion-item>
      <ion-item>
        <ion-label><b>Meow</b></ion-label>
      </ion-item>
    </div>
  </ion-list>

这是我的 onChange 方法：

 onChange(event) {
    let value = event.detail.value;
    console.log(event.detail.value);
    if (value == "") {
      this.offset = 0;
      this.loadPokemon();
      return;
    }

    this.pokeService.findPokemonByGeneration(value).subscribe(
      (res) => {
        this.pokemon = [res];
      },
      (err) => {
        this.pokemon = [];
      }
    );
  }

这是我的 findPokemonByGeneration 方法：

  findPokemonByGeneration(search) {
    return this.http.get(`${this.baseUrl}/generation/${search}`).pipe(
      map((generation) => {
        generation["generationIndex"] = generation["id"];
        return generation;
      })
    );
  }

【问题讨论】：

标签： angular search ionic4

【解决方案1】：

为什么不能直接使用数组过滤功能

return poke.filter((item) => {
  return  item.id === id;
});

或者创建一个通用管道来过滤任何属性，查看它可能对您有帮助的链接：

Filter and Sorting in Angular

【讨论】：