Angular4:如何从模型类中检索数据

时间:2018-04-03 07:16:05

标签: angular

我正在使用Angular4应用程序,在此我将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 res

enter image description here

我想在span标记中打印每个数据

enter image description here

1 个答案:

答案 0 :(得分:0)

试试这个,我假设您的响应JSON与界面匹配。

选项01

<强> cartdata.service.ts

导入模块

expression expected

<强> app.component.ts

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

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

  }

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