Блог

Я хочу отобразить имена 151 первых покемонов из api, но я не могу заставить его работать. Что не так с моим кодом или чего мне не хватает?

app.component.ts

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})

export class AppComponent {
title = 'pokemon-app';
public data:any = []
constructor(private http: HttpClient) {
}

getData(){
const url ='https://pokeapi.co/api/v2/pokemon?limit=151amp;offset=0/'
this.http.get(url).subscribe((res)=>{
this.data = res
console.log(this.data)
})
}
}
  

app.component.html

 <div style="text-align:center">
<h1>
  Welcome!
</h1>
<table class="table table-bordered">
<thead>
    <tr>
        <th>Name</th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let data of data">
        <td>{{data.name}}</td>
        
    </tr>
</tbody>
</table>


</div>
  

Сначала вам нужно вызвать метод getData , затем вызываемая конечная точка возвращает данные в следующем формате

 { 
   count: 1050,
   next: "https://pokeapi.co/api/v2/pokemon?offset=151amp;limit=151",
   previous: null,
   results: [
   {
      name: "Bulbasaur",
      url: "https://pokeapi.co/api/v2/pokemon/1/"
   }
}
  

итак, вам нужно выполнить итерацию по results свойству.

Вы можете использовать map свойство rxjs для получения конкретных результатов. Например, следующее

 
  ngOnInit() {
    this.getData()
  }

  getData() {
    const url ='https://pokeapi.co/api/v2/pokemon?limit=151amp;offset=0/'
    this.http.get(url).pipe(
      map((data:any) => data.results) // <-- this is what you need
    ).subscribe((res)=>{
      this.data = res
      console.log(this.data)
      })
  }
  

Вот полный пример

https://stackblitz.com/edit/angular-so-pokemon?file=src/app/app.component.ts

// вам нужно вызвать метод ngOnInit() в вашем классе компонентов.

// Что вам нужно добавить. Сначала добавьте этот импорт в свой компонент

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


export class AddComponent implements OnInit {

    ngOnInit() {
        this.getData();
    }
}