Php 如何通过angular 5从api获取数据

我有从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>

产品
代码
价格
行动
{{product.product_name}

这里的问题是，我在浏览器中运行代码时出现此错误：

1-错误：找不到类型为“object”的不同支持对象“[object]”。NgFor只支持绑定到数组之类的可重用文件

---

2-错误上下文调试上下文{view:{…}，nodeIndex:21，nodeDef:{…}，elDef:{…}，elView:{…}

我怀疑响应来自后端

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

---

只需检查这里的“res”。它可能不是数组，因此是产品。

您的API响应必须是JSON格式，否则您应该在服务中明确声明

respondType

。比如：

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

apiUrl='1〕http://localhost:8000/api/v1/products'
showProducts（）{
返回this.http.get（this.apirl，{observe:'response'，
resposeType:'text'}）；
}

---

您的DOM或组件似乎没有什么问题。

试试这个，它可能会有帮助，还可以查看console.log值

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

---

尝试这种方式，它将有助于优化和检查控制台日志值

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

---

确保API返回

array

的

obderable

而不是

object

尝试解析为类似JsON的

this.products=res.JsON（）

你能更详细地解释一下你的

res

看起来像什么吗？你能做一个

console.log（res）

并显示输出吗？