从Angular2到WebApi

时间:2016-06-14 13:02:16

标签: c# asp.net-web-api angular

我正在尝试使用角度为2的HTTP服务的http post请求。但参数不会在web api操作上进行。以下是我的组件和服务:
我注入服务的组件(LogService)

    import {Component, Inject} from '@angular/core';
    import {Http, HTTP_BINDINGS} from '@angular/http';
    import {Observable} from 'rxjs/Rx';
   import {LogService} from '../../services/canvas/logService'
   import {PagingModel} from '../../PagingModel';
   @Component({
   selector: 'about',
   templateUrl: 'app/components/about/about.html',
   styleUrls: ['app/components/about/about.css'],
   bindings: [LogService, HTTP_BINDINGS],
   providers: [],
   directives: [],
   pipes: []
   })

   export class About {
        private abc = "";
      constructor( @Inject(LogService) public _logService: LogService) {
       this._logService = _logService;
   }

    ngOnInit() {
    this.getAllLogs();

     }
    getAllLogs() {
    var body = { CurrentPageIndex: 1, PageSize: 10,SearchText:"JHFGHY"};
    let mod = new PagingModel();
     mod.CurrentPageIndex = 1;
     mod.PageSize = 10;
     mod.SearchText = "sdfs";
     this._logService.getAllLogs(mod).subscribe(function (data) {

        var abc = data.json();
    });


  }
 }

将数据发布到web api post的服务(LogService)

import { Injectable } from '@angular/core';
 import { Http, Response, Headers, RequestOptions} from '@angular/http';
 import {Observable} from 'rxjs/Observable';
 import 'rxjs/add/operator/map';
 import {About} from '../../components/about/about';
 require('rxjs/add/operator/toPromise');


 @Injectable()
 export class LogService {
 public headers: Headers;

 constructor(private http: Http) {
    this.http = http;

 }
  getAllLogs(model): Observable<Response> {

    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });

    return this.http.post("http://localhost:64224/api/Logs/Paging",JSON.stringify(model), options);

   }


 }

我的web api控制器操作是:

    [HttpPost]

    [Route("Paging")]
    public ResponseMessage Paging([FromBody] PagingModel model)
     {
        ResponseMessage responseMessage = new ResponseMessage();
        List<ActivityLogModel> activityLogModelList = new List<ActivityLogModel>();
        activityLogModelList = logService.Paging(model);
        responseMessage.totalRecords = activityLogModelList.Count();
        activityLogModelList = activityLogModelList.OrderBy(x => x.UserId).Skip((model.CurrentPageIndex - 1) * model.PageSize).Take(model.PageSize).ToList();
        responseMessage.data = activityLogModelList;
        return responseMessage;
    }
    #endregion

我无法在此Web Api控制器中获取从LogService http post方法发出的参数。请帮帮我。提前谢谢

1 个答案:

答案 0 :(得分:1)

getAllLogs应该是

getAllLogs() {
  var body = { CurrentPageIndex: 1, PageSize: 10,SearchText:"JHFGHY"};
  let mod = new PagingModel();
  mod.CurrentPageIndex = 1;
  mod.PageSize = 10;
  mod.SearchText = "sdfs";
  this._logService.getAllLogs(mod).subscribe(data => { // <<<=== use arrow function instead of `function`
    this.abc = data.json(); // <<<=== this.abc
  });
}