Angular 4：API 响应返回“”

Question

我正在使用 Angular4 应用程序。在此我试图显示它显示为 [object object] 的 API 响应。

请解释一下。 这是我的 Json 回复 这是我的服务文件。

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

@Injectable()
export class CartdataService {

  public i_product_Path = new BehaviorSubject<any>('');
  i_cast_Product_Path = this.i_product_Path.asObservable();

  current_product :any;

  constructor(private http: HttpClient) { }

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

}

我在这里调用 API。

这是我的模型文件。

export interface Images {
  big_Images: BImage[];
  small_Images: Simage[];
  selected_Product_Images: SelectedImage[]
}

export interface BImage {
  big_Images: string;
}

export interface Simage {
  small_Images: string;
}

export interface SelectedImage {
  selected_Product_Image: string;
}

这是我的组件

import { Component } from '@angular/core';
import { CartdataService } from './cartdata.service';
import { Images } from './model';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  constructor(private CartdataService: CartdataService) {}

   images : Images;

   ngOnInit() {
    this.CartdataService.i_cast_Product_Path.subscribe( (response : Images ) =>
    { this.images = response; });
  }
}

在这里我得到 API 响应，我想要做的是我需要在单独的标签中显示所有 API 值。

<span >
  {{images}}
</span>

通过使用上面的代码，我得到了 [object object] 的输出。

Answer 1

右键单击网页并选择检查，然后转到网络选项卡并检查来自服务器的内容。响应的格式应与您的模型在您的客户端中的格式相同，即

export interface Images {
  big_Images: BImage[];
  small_Images: Simage[];
  selected_Product_Images: SelectedImage[]
}

您在 HTML 代码中使用的 this.images 是一个对象，您不能像 {{object}} 这样只打印对象。所以如果你在你的代码中添加一个调试器来看看你的对象是什么！！！ 像下面这样改变你的核心。

  ngOnInit() {
    this.CartdataService.i_cast_Product_Path.subscribe(
      (response:Images) => { 
        this.images = response; 
        debugger;
      });
  }

现在保持检查打开并重新加载页面，您的代码将在调试器行中获得库存，您可以看到它在 this.images 对象中的内容。

另一种方法是编写 console.log(this.images) 而不是调试器。在这种情况下，this.images 的内容将打印在您的 Inspect>console 部分中。

Answer 2

对于一般调试，在控制台中放置一个调试器语句（或断点）

ngOnInit() {
this.CartdataService.i_cast_Product_Path.subscribe( (response : Images ) =>
{
debugger;
this.images = response; });
}

（根据您的数据结构）

<span>
 <div ngFor(let img in images.Simage)>   
   <img src={{img}}>
 </div>
</span>

我猜您正在尝试构建一个小图片链接到大图片的页面。如果是这样，那么您需要重组数据结构以将大小图像包含在单个对象中，并将所选图像放在外部。

export interface imageData = { smallImage: string, bigImage: string }
export interface imageCollection { images: imageData[], selectedImage: string }

让知道这是否有帮助..