PokeAPI + Angular:如何获取精灵的进化链

npm install -g @angular/cli

ng new pokeapi-app

cd pokeapi-app

ng generate component evolution-chain

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-evolution-chain',
  templateUrl: './evolution-chain.component.html',
  styleUrls: ['./evolution-chain.component.css']
})
export class EvolutionChainComponent implements OnInit {
  evolutionChain: any;

  constructor(private http: HttpClient) { }

  ngOnInit(): void {
    this.getEvolutionChain();
  }

  getEvolutionChain(): void {
    const pokemonId = 1; // 替换为你要获取进化链的精灵的ID
    const apiUrl = `https://pokeapi.co/api/v2/pokemon-species/${pokemonId}/`;
    
    this.http.get(apiUrl).subscribe((data: any) => {
      const evolutionChainUrl = data.evolution_chain.url;
      this.http.get(evolutionChainUrl).subscribe((evolutionData: any) => {
        this.evolutionChain = evolutionData.chain;
      });
    });
  }
}

<div *ngIf="evolutionChain">
  <h2>{{ evolutionChain.species.name }}'s Evolution Chain</h2>
  <ul>
    <li *ngFor="let evolution of evolutionChain.evolves_to">
      {{ evolution.species.name }}
    </li>
  </ul>
</div>

<app-evolution-chain></app-evolution-chain>