如何在Angular4中使用API​​中的数据

Question

我正在使用Angular4应用程序，在这里我试图在我的组件文件中接收json数据。但我未定义为响应。

Json结构

服务档案

separ['RT'] = separ['text'].str.contains(r"^(?=.*\bRT\b\s@\b).*$", case=False) 

在服务文件中，我通过使用以下代码行获得了结果

 get_New_Products():Observable<Products[]>{
    this.productServiceURL = `http://localhost:abc/api/data/Get_Product`;
    return this.http.get<Products[]>(this.productServiceURL);
  }

对于特定数据

console.log(data); //output : Array of data

组件文件

console.log(data[0]['PRODUCT_NAME']); // output : iPhone 

我无法访问数据。我想将所有PRODUCT_ID，PRODUCT_NAME ...等绑定在一个变量中。我认为我试图获取数据的方式是错误的。

我必须在这些方面做一些魔术，

ngOnInit() {
    this.CartdataService.get_New_Products();
    this.CartdataService.get_New_Products()
    .subscribe(
      data => {
        this.products_Id = data['PRODUCT_ID'];
        this.product_Name = data['PRODUCT_NAME'];
        this.products_Price = data['PRODUCT_PRICE'];
        this.products_Image=data['PRODUCT_IMAGE']
        this.products_Image_Onhover=data['PRODUCT_IMAGE_ONHOVER']
        console.log(this.product_Name);
      });
   }

模型文件

    this.products_Id = data['PRODUCT_ID'];
    this.product_Name = data['PRODUCT_NAME'];
    this.products_Price = data['PRODUCT_PRICE'];
    this.products_Image=data['PRODUCT_IMAGE']
    this.products_Image_Onhover=data['PRODUCT_IMAGE_ONHOVER']

请帮我解决这个问题。

Answer 1

试试这个

productData;
this.CartdataService.get_New_Products()
.subscribe(
  data => {
    this.productData=data;
    this.productIds=[];
    for (let item of data) {
       this.productIds.push(data['PRODUCT_ID']);
    }
});

如果要打印所有产品名称，请按照代码

<div *ngFor="let item of productData">
   <span>{{item.PRODUCT_IMAGE}}</span>
   <span>{{item.PRODUCT_NAME}}</span>
   <span>{{item.PRODUCT_PRICE}}</span>
   <span>{{item.PRODUCT_IMAGE}}</span>
   <span>{{item.PRODUCT_IMAGE_ONHOVER}}</span>
</div>

我希望这能解决你的问题。如果您仍有任何问题，请告诉我。