Ionic 3 Angular 5：发布数据示例

我创建了一个空白项目 . 使用asp.net web API获取和发布数据的简单项目 . 我使用post方法时收到错误 .

错误消息：

此资源不支持请求实体的媒体类型“text / plain” .

我认为缺少设置HTTP请求内容类型json . 所以我添加了一个post方法的选项仍然无法正常工作 . 下面附上了请求和响应的屏幕截图

Code: package.json:

{
  "name": "addEmployee",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/animations": "5.2.10",
    "@angular/common": "5.2.10",
    "@angular/compiler": "5.2.10",
    "@angular/compiler-cli": "5.2.10",
    "@angular/core": "5.2.10",
    "@angular/forms": "5.2.10",
    "@angular/http": "5.2.10",
    "@angular/platform-browser": "5.2.10",
    "@angular/platform-browser-dynamic": "5.2.10",
    "@ionic-native/core": "4.7.0",
    "@ionic-native/splash-screen": "4.7.0",
    "@ionic-native/status-bar": "4.7.0",
    "@ionic/storage": "2.1.3",
    "ionic-angular": "3.9.2",
    "ionicons": "3.0.0",
    "rxjs": "5.5.10",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.26"
  },
  "devDependencies": {
    "@ionic/app-scripts": "3.1.9",
    "typescript": "~2.6.2"
  },
  "description": "An Ionic project"
}

enroll-user.html

<ion-list>
        <ion-item>
          <ion-label floating>Name</ion-label>
          <ion-input type="text" [(ngModel)]="userData.Name"></ion-input>
        </ion-item>

        <ion-item>
          <ion-label floating>Location</ion-label>
          <ion-input type="text" [(ngModel)]="userData.Location"></ion-input>
        </ion-item>
        <ion-item>
          <ion-label floating>Id</ion-label>
          <ion-input type="text" [(ngModel)]="userData.Id"></ion-input>
        </ion-item>      
        <button ion-button full color="success" (click)="signup()">Save</button>
        </ion-list>

enroll-user.ts

//import { Component } from '@angular/core';
//import { IonicPage, NavController, NavParams } from 'ionic-angular';

import { Component } from '@angular/core';
import {  NavController} from 'ionic-angular';

import { WebapiServiceProvider } from '../../providers/webapi-service/webapi-service';

@Component({
  selector: 'page-enroll-user',
  templateUrl: 'enroll-user.html',
})
export class EnrollUserPage {
  responseData : any;
  userData = {"Name": "","Location": "", "Id": ""};
  constructor(public navCtrl: NavController, public webService:WebapiServiceProvider) {

  }
  signup(){
    this.webService.postData(this.userData,'Enrollment').then((result) => {
     this.responseData = result;
     if(this.responseData.userData){
     console.log(this.responseData);

     }
     else{ console.log("User already exists"); }
   }, (err) => {
     // Error log
   });

 }
  ionViewDidLoad() {
    console.log('ionViewDidLoad EnrollUserPage');
  }

}

webapi-service.tc

import {Injectable} from '@angular/core';
import {Http, Headers} from '@angular/http';
import 'rxjs/add/operator/map';

/*
  Generated class for the WebapiServiceProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/

let apiUrl = 'http://localhost:4440/api/'; //this works fine using postman

@Injectable()
export class WebapiServiceProvider {

  constructor(public http : Http) {
    console.log('Hello WebapiServiceProvider Provider');
  }

  postData(credentials, type) {
    return new Promise((resolve, reject) => {
      let headers = new Headers();
          headers.append('Content-Type','application/json; charset=utf-80');

      this.http.post(apiUrl + type, JSON.stringify(credentials), {headers: headers})
        .subscribe(res => {
          resolve(res.json());
        }, (err) => {
          reject(err);
        });
    });

  }
}

EDITED VERSION: 使用httpclient和httpHeader

import {Injectable} from '@angular/core';
//import {HttpClient , HttpHeaders } from '@angular/common/http';
//import 'rxjs/add/operator/map';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
/*
  Generated class for the WebapiServiceProvider provider.

  See https://angular.io/guide/dependency-injection for more info on providers
  and Angular DI.
*/

let apiUrl = 'http://localhost:4440/api/';

@Injectable()
export class WebapiServiceProvider {
  private _headers = new HttpHeaders().set('Content-Type', 'application/json; charset=utf-80');
  constructor(public http : HttpClient) {
    console.log('Hello WebapiServiceProvider Provider');
  }

  postData(credentials, type) {
    return new Promise((resolve, reject) => {
     // const headers = this._headers.append('Content-Type','application/json; charset=utf-80');

     const headers=this._headers;
    //  let headers = new HttpHeaders();
        //  headers.append('Content-Type','application/json; charset=utf-80');
        //  headers = headers.append('Content-Type','application/json; charset=utf-80');
      this.http.post(apiUrl + type, JSON.stringify(credentials), {headers: headers})
        .subscribe(res => {
          resolve(res);
        }, (err) => {
          reject(err);
        });
    });

  }
}

Asp.net Webapi: 使用邮递员可以正常使用

[HttpPost]
        [Route("api/Enrollment", Name = "PropertyRoute")]
        public clsEnrolResponse Insert(clsEnrolRequest objRequest)
        {

            clsEnrolResponse objResponse = new clsEnrolResponse();
            try
            {
                if (objRequest.Name != null || objRequest.Name.Trim() != "")
                {

                    if (objRequest.Location == null)
                    {
                        objRequest.Location = "";
                    }
                    int iResult = clsDB.InsertBookingInfo_Temp(objRequest);
                    objResponse.EnrolmentID = objRequest.Id;
                    objResponse.Status = "Success";
                    HttpResponseMessage message = new HttpResponseMessage();
                    message = Request.CreateResponse(HttpStatusCode.OK);
                }
                else
                {
                    objResponse.Status = "ERROR";
                    objResponse.ErrorMsg = "Name is blank!!";
                    objResponse.EnrolmentID = "-1";
                }
            }
            catch (Exception ex)
            {
                objResponse.Status = "ERROR";
                objResponse.EnrolmentID = "-1";
                objResponse.ErrorMsg = ex.Message.ToString();
            }

            return objResponse;
        }

IMG1：

IMG2: