Выполнение запроса API GET и отображение информации в HTML. - PullRequest
Новая
       4

Выполнение запроса API GET и отображение информации в HTML.

0 голосов
/ 07 декабря 2018

Я пытался сделать вызов API, но безуспешно.Я получаю это сообщение об ошибке при отображении имени.Очень жаль, что я вставил три файла, но это мой первый вопрос, и я новичок.Спасибо за любую помощь.

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

Вот мой beers.service.ts файл 

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;
    });
  }
}

Вот мой app.component.ts У меня такое чувство, что проблема сконструктор, но все, что я пробовал, не привело к успеху. 

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()
  }
}

И, наконец, вот мой app.component.html

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

Ответы [ 2 ]

0 голосов
/ 07 декабря 2018

Вы должны прочитать о RxJS, как он используется в Angular HTTP-клиенте.Функция getListOfBeers возвращает подписку, а не массив пива.

В службе 

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

В компоненте 

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

и убедитесь, что вы создаете экземпляры пива с пустыммассив 

beers = []
0 голосов
/ 07 декабря 2018

У вас есть неинициализированная переменная.Когда вы просто говорите beers или beers:any, оно все еще не определено.Это означает, что ваш шаблон пытается зациклить что-то, что не определено (до тех пор, пока не вернется запрос API, то есть через несколько миллисекунд после его получения).

Предварительно инициализируйте массив или покажите его условно.

Версия 1:

Преинициализировать массив в app.component.ts: 

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

Версия 2

При запуске приложения ваш component.beers не будет определен, покаAPI возвращается.Вы не можете зациклить неопределенное, поэтому скрывайте список до тех пор.Выезд beers.component.html: 

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