Angular4：如何从模型类检索数据

Question

I am working in an Angular4 application ,In this I am storing API response to model class ,Now I want to retrieve data from model class in specific component,I have tried something but I can't get the values.

Model class

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;
}

component

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

I want to print each data in a span tag

Answer 1

Try this, I assumed your response JSON matches the interface.

Option 01

cartdata.service.ts

Import below modules

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);

  }

app.component.ts

ngOnInit() {
    this.CartdataService.get_Product_Path('').subscribe(response =>
    { 
        console.log(response);
        this.images = response.json(); 
    });
  }

I hope this will help you. If you have any problem or doubt let me know.