返回＆＃34; undefined＆＃34;同时在Angular4中使用API​​数据

Question

我正在尝试在我的应用程序中使用API​​响应，它始终返回＆＃34; undefined＆＃34;。

这是我的服务档案。

get_Image_Path(pName: string){
    this.current_product = pName.trim();
    this.serviceUrl = `http://localhost:abc/api/data/GetImage/?imageName=${this.current_product}`;
    return this.http.get(this.serviceUrl);
  }

MY-cart.component.ts

ngOnInit() {
    this.CartdataService.get_Image_Path(this.product_Name)
      .subscribe(
        data => { data =>this.check =data
        });
  }

HTML代码

<div *ngFor="let item of check">

  <span>{{item.big_Images}}</span>
  <span>{{item.small_Images}}</span>
  <span>{{item.selected_Product_Image}}</span>
</div>

API响应结构

我想绑定来自api的所有数据。

Answer 1

更改您的ngOnInit（）函数，如下所示：

  ngOnInit() {
    this.CartdataService.get_Image_Path(this.product_Name)
      .subscribe(
        (data: any) => { this.check = data });
  }

您还可以调试代码以添加调试器;在您的服务电话中，如下所示：

  ngOnInit() {
    this.CartdataService.get_Image_Path(this.product_Name)
      .subscribe(
        (data: any) => {
          debugger;
          this.check = data 
        });
  }

请注意。当您在代码中添加调试器时，您必须在运行代码时保持对浏览器的检查。

Answer 2

像这样更改您的服务代码和组件代码。希望这会有所帮助。

    get_Image_Path(pName: string){
        this.current_product = pName.trim();
        this.serviceUrl = `http://localhost:abc/api/data/GetImage/?imageName=${this.current_product}`;
            return this.http.get(this.serviceUrl).map((res) => {
    return res.json();
    });
}


ngOnInit() {
    this.CartdataService.get_Image_Path(this.product_Name)
      .subscribe((data) => { this.check = data});
  }

希望这有帮助。

Answer 3

试试这个

service .ts

import {Http,Request,Response,Headers, RequestOptions} from "@angular/http";

get_Image_Path(pName: string):Observable<any>{
    this.current_product = pName.trim();
    this.serviceUrl = `http://localhost:abc/api/data/GetImage/?imageName=${this.current_product}`;
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    return this.http.get(this.serviceUrl,options);
}

<强> component.ts

this.CartdataService.get_Image_Path(this.product_Name).subscribe(data => {
    this.check = data;
});

我希望这会对你有所帮助。如果您仍有任何问题，请告诉我。