从 angular2 调用 Web 服务 api http答案

【问题标题】：calling a web service api http from angular2从 angular2 调用 Web 服务 api http
【发布时间】：2018-03-08 21:56:59
【问题描述】：

我正在调用 httpGet 类型的 Web 服务 api，从 Angular 向它发送一个 CopiadoraBusquedaModel 类型的参数，该服务检索 CopiadoraBusqueda 类型的参数，但是当我在服务 Web API 上检查 de 参数时，该值为 null。我已经能够检查来自角度的模型是否与来自 C# 的对象匹配。有什么想法吗？

copiadorabusquedamodel.ts：

 export class CopiadoraBusquedaModel {
 public codigoCopiadora: string;
 public numeroSerie: string;
 public numeroInventario: string;
 public nombrePersonaEncargada: string;
 public idCliente: number;
 public idContrato: number;
 public idProveedor: number;
 public idMarca: number;
 public idModelo: number;
 public fechaInstalacion: string;
 public fechaFinFacturacion: string;  
 }

service.ts

import { Http, RequestOptions, Headers} from '@angular/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Rx';
import { ListadoCopiadorasModel } from '../../models/listadocopiadoras.model';
import { CopiadoraBusquedaModel } from '../../models/copiadorabusqueda.model';

@Injectable()
export class ListadoCopiadorasService {
headers: Headers;
options: RequestOptions;

private url: any;
// La variable data cachea los datos del servicio.
private data: any;
constructor (private _http: Http) {}

 getListadoCopiadorasByFiltro(CopiadoraBusqueda : CopiadoraBusquedaModel): Observable<ListadoCopiadorasModel[]> {
    this.url = 'api/copiadoras/get/listadoCopiadorasByFiltro';
    this.headers = new Headers({'Content-Type': 'application/json','Accept': 'q=0.8;application/json;q=0.9'});

    //this.options = new RequestOptions({ headers: this.headers, params: { 'filtro': JSON.stringify(CopiadoraBusqueda) } });
    this.options = new RequestOptions({ headers: this.headers, params: { 'filtro': CopiadoraBusqueda } });
    // Si la variable data está vacía se llama al servicio.
    // Si tiene datos, se devuelve la variable como observable.
    if (!this.data) {
        return this._http.get(this.url, this.options)
            .map((response: any) =>
                response.json() as ListadoCopiadorasModel[])
            .do(data => this.data = data);
    } else {
        return Observable.of(this.data)
            .map((response: any) =>
                response as ListadoCopiadorasModel[]);
    }
}

Copiadoras.Controller.cs： // 一些东西......

[ScriptService]
[RoutePrefix("api/copiadoras")]
public class CopiadorasController: ApiController
{

[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json, UseHttpGet = true, XmlSerializeString = false)]
[Route("get/listadoCopiadorasByFiltro")]
[HttpGet]
public IEnumerable<Copiadora> GetListadoCopiadorasByFiltro(CopiadoraBusqueda filtro)
{
  IEnumerable<Copiadora> listadoCopiadoras = null;    
  using (var servicioCopiadoras = new ServicioCopiadoraClient())
  {
    listadoCopiadoras = servicioCopiadoras.ObtenerCopiadorasByFiltro(filtro);
  }

  return listadoCopiadoras.AsEnumerable();
}

CopiadoraBusqueda.cs：

  public class CopiadoraBusqueda
  {

    [DataMember]
    public string CodigoCopiadora { get; set; }

    [DataMember]
    public string NumeroSerie { get; set; }

    [DataMember]
    public string NumeroInventario { get; set; }

    [DataMember]
    public string NombrePersonaEncargada { get; set; }

    [DataMember]
    public Int32 IdCliente { get; set; }

    [DataMember]
    public Int32 IdContrato { get; set; }

    [DataMember]
    public Int32 IdProveedor { get; set; }

    [DataMember]
    public Int32 IdMarca { get; set; }

    [DataMember]
    public Int32 IdModelo { get; set; }

    [DataMember]
    public string FechaInstalacion { get; set; }

    [DataMember]
    public string FechaFinFacturacion { get; set; }
}

【问题讨论】：

标签： angular typescript asp.net-web-api service http-get

【解决方案1】：

尝试将 [FromUri] 属性添加到 GetListadoCopiadorasByFiltro 函数，如下所示：

public IEnumerable<Copiadora> GetListadoCopiadorasByFiltro([FromUri]CopiadoraBusqueda filtro)

这将强制 WebApi 从 URL 获取参数。这是一篇关于它的好帖子：https://docs.microsoft.com/en-us/aspnet/web-api/overview/formats-and-model-binding/parameter-binding-in-aspnet-web-api

【讨论】：

谢谢vzayko，我加了[FromUri]属性，但是de属性是空的，我还要放点别的吗？
可能是字段映射。在 CopiadoraBusqueda.cs 中尝试将属性（即 CodigoCopiadora）更改为与 JS 中相同的情况（即 codigoCopiadora）并重新测试。如果你会得到这个值，那么对其余的做同样的事情。此外，您可以指定在 JS 中看到的 DataMember 名称。祝你好运！
我在 c# 类“CopiadoraBusqueda.cs”和模型“copiadoraBusquedamodel.ts”中更改了一个属性 CodigoCopiadora，并且只使用了这个，我评论过的其他属性，但 de value 是 null y web api方法，不知道“listadocompiadoras.service.ts”文件中的“getListadoCopiadorasByFiltro”方法是否正确实现，

【解决方案2】：

您好，如果您想使用 [FromUri]，您必须在 url 中传递参数，正如 vzayko 所说。这需要更改您的客户端代码。

您的网址必须类似于 api/copiadoras/get/listadoCopiadorasByFiltro?CodigoCopiadora=0000&NumeroSerie=XXXXX&NumeroInventario=12345

对标头数据的参数绑定没有开箱即用的支持。但是，您可以实现自己的 HttpParameterBinding。你可以看看这个here的例子

【讨论】：