Как получить данные из API по угловым 5

Question

У меня есть служба данных, которая извлекает данные из моего API:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { HttpClient, HttpParams } from '@angular/common/http';

@Injectable()
export class DataService {

constructor(private http: HttpClient) { }

showProducts(){
return this.http.get('http://localhost:8000/api/v1/products');
}

}

и мой компонент

import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
//import { Products } from '../products';

@Component({
selector: 'app-products',
templateUrl: './products.component.html',
styleUrls: ['./products.component.css']
})
export class ProductsComponent implements OnInit {
products;

constructor(private data:DataService) { }

ngOnInit() {
this.showProducts();
}
showProducts() {
this.data.showProducts()
  .subscribe(res => this.products = res);
}

}

и мой HTML-компонент:

<div>
<table border="1">
<tr>
  <th>Product</th>
  <th>Code</th>
  <th>Price</th>
  <th>Action</th>
</tr>
<tr *ngFor="let product of products">
    {{product.product_name}}
</tr>
</table>


</div>

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

1- Ошибка ОШИБКИ: не удается найти другой поддерживающий объект «[объект]] типа« объект ». NgFor поддерживает только привязку к итерациям, таким как массивы.

2- КОНТЕКСТ ОШИБКИ DebugContext_ {view: {…}, nodeIndex: 21, nodeDef: {…}, elDef: {…}, elView: {…}}

Answer 1

Попробуйте, таким образом, это поможет, а также оптимизировать и проверить значение журнала консоли

showProducts(): void {
  this.data.showProducts().subscribe(( this.products: any) => {
    console.log(this.products); 
    });
  }

Answer 2

Ваш ответ от API должен быть в формате JSON, в противном случае вы должны явно объявить respondType в вашем сервисе. что-то вроде:

   apiUrl = 'http://localhost:8000/api/v1/products'
   showProducts() {
        return this.http.get<Product[]>(this.apiUrl, {observe: 'response', 
   resposeType: 'text'});
   }

В вашем DOM или Компоненте нет ничего плохого.

Answer 3

Попробуйте, это может помочь, и посмотрите значение console.log тоже

 showProducts() {
          this.data.showProducts().subscribe(res => {
                 this.products = res;
                console.log(this.products);
           });
  }

Answer 4

Я подозреваю, что ответ поступил с сервера.

showProducts() {
this.data.showProducts()
  .subscribe(res => this.products = res);
}

Просто проверьте "res" здесь. Это может быть не массив, следовательно, продукты.