angular - Göra en API GET-förfrågan och visa informationen i HTML

Jag har försökt att göra ett API-anrop men har inte haft någon framgång. Jag får detta felmeddelande när jag visar namnet. Jag beklagar verkligen att jag har klistrat in tre filer men detta är min första fråga här och jag är nybörjare. Tack för all hjälp.

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Här är min beers.service.ts-fil

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

@Injectable({
  providedIn: 'root'
})
export class BeersService {
  private beerUrl = 'https://api.punkapi.com/v2/beers/';
  beers;

  constructor(private _httpClient: HttpClient) { }

  getListOfBeer() {
    return this._httpClient.get(this.beerUrl).subscribe(
      res => {
         this.beers = res;
    });
  }
}

Här är min app.component.ts. Jag har en känsla av att problemet ligger i konstruktorn, men allt jag har försökt har inte lett till någon framgång.

import { Component } from '@angular/core';
import { BeersService } from './beers.service';

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

  constructor(private _beerService: BeersService) {
    this.beers = _beerService.getListOfBeer()
  }
}

Och slutligen här är min app.component.html

<div class="container">
  <div *ngFor="let beer of beers">
    <p>{{ beer.name }}</p>
  </div>
</div>

Svar #1

Du bör läsa om RxJS eftersom det används i Angular HTTP-klienten. Funktionen getListOfBeers returnerar en Subscription, inte en lista med öl.

I tjänst

getListOfBeer() {
    return this._httpClient.get(this.beerUrl);
}

I komponent

constructor(private _beerService: BeersService) {
    _beerService.getListOfBeer().subscribe(res => this.beers = res)
}

och se till att du instansierar beers med en tom array

beers = []

Svar #2

Du har en oinitialiserad variabel. När du bara säger beers eller beers:any, är den fortfarande odefinierad. Vilket betyder att din mall försöker loopa något som är odefinierat (tills API-förfrågan kommer tillbaka, vilket är några millisekunder efter att du får grejen).

Förinialiera arrayen eller visa den villkorligt.

Version 1:

Förinitialisera arrayen i app.component.ts:

export class AppComponent {
  beers = [];
  ...

Version 2

Vid appstart är din component.beers undefined, tills API:et returnerar. Du kan inte loopa igenom undefined, så göm listan tills dess. Kolla in beers.component.html:

<div class="container" *ngIf="beers">
    <div *ngFor="let beer of beers"><p>{{ beer.name }}</p>
</div>