Question

我正在Angular4项目中工作，在此我将API响应存储到模型类中，现在我想将模型类中的数据检索到组件。

服务 - 模型 - 组件 - htmlpage

服务

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/map';
import { Data } from '@angular/router';
import {Images} from '../images'
import { Observable } from 'rxjs/Observable';



@Injectable()
export class CartdataService {

  public i_product_Path = new BehaviorSubject<any>('');
  i_cast_Product_Path = this.i_product_Path.asObservable();
  current_product :any;
  private serviceUrl :string;
  constructor(private http: HttpClient) { }

 get_Product_Path(pName: string) : Observable<Images[]>{
    this.current_product = pName.trim();
    this.serviceUrl =`http://localhost:abc/api/data/GetImage/?imageName=${this.current_product}`;
    return this.http.get<Images[]>(this.serviceUrl);
  }
}

在这里，我调用API并将值存储在模型类中。

模型类

export interface Images {
    big_Images: string[];
    small_Images: string[];
    selected_Product_Images: string[]
  }

组件

在这里，我想调用模型类并获取所有API响应然后将其显示到html页面。但我不知道如何在组件内调用模型类并从模型中获取值。

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) {}
   ngOnInit() {}
}

API响应结构：

Answer 1

您定义并使用Model作为接口。角度接口通常使用检查数据类型和结构。

因此，您不需要将模型用作函数。

在component.ts

中

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) {}
   ngOnInit() {}
   callService(){
    this.cartdataService.get_Product_Path('somePath').subscribe(
      result => {   // <= you define Observable<Images[]> data type in service.ts
        let imageResult: Images[] = result;

        //Do something here
        console.log("imageResult : ", imageResult);
      },
      error => {},
      () => {}
    );
  }
}

Answer 2

您需要定义：

export class AppComponent  {
bigImages: Images[];
smallImages: Images[];
spImages: Images[];
  constructor(private CartdataService: CartdataService) {}
   ngOnInit() {}
}

然后你应该根据你的需要在ngOnInit或任何其他地方打电话，pName是你发送给服务的变量：

this.CartdataService.get_Product_Path(pName)
    .subscribe(
        data => {
            this.bigImages = data['0'];
            this.smallImages = data['1'];
            this.spImages = data['2'];
         },
         error => { // here you handle errors },
         () => {
               // here you do something else
                });

Answer 3

首先，我不确定你为什么用_编写变量，是不是骆驼足够了？在阅读代码时，它会带来一些复杂性。

其次，响应API实际上不是你最想要的，而不是拥有一个对象数组，你可以有3个字段，其中字符串数组为值，第一个对象为smallImages，第二个对象为bigImages，第三个是你选择的图像;它看起来像这样：

{
  smallImages: [
    "assets/Images/ProductDetailsPage/show1.png",
    "assets/Images/ProductDetailsPage/show2.png"
  ],
  bigImages: [
    'assets/Images/ProductDetailsPage/ProductDetailsPageThumbnails/bal1.png',
    'assets/Images/ProductDetailsPage/ProductDetailsPageThumbnails/bal1.png'
  ],
  selectedProductImage: ['assets/Images/ModalScreen/added.png']
}

这样可以简化您的实现，并且可以直接映射到您的模型上。

您可以通过工作示例查看示例here，随时可以使用您的API响应进行更新。

如何从Angular4中的模型类中获取数据

3 个答案: