Problem in inserting data into web API server in Angular2

Question

Hi iam trying to insert data into web api server using angular 2 ..here am not able to insert any data .please help me to find out the mistake.am new to this.2 dropdown i binded without using api.now am trying insertion using api url..bt now dropdown also disappeard.please help me t

 

 

 model class 

 

export class SaveDetails {

id: string;

parameter1: string;

parameter2: string;

formula1: string;

formula2: string;

startdate: string;

enddate: string;

}

 

 

 

 

my service:

 

import { Injectable } from '@angular/core';

import { Http,Response, RequestOptions,Headers } from '@angular/http';

import 'rxjs/add/operator/map';

import{SaveDetails} from './SaveDetails';

import {Observable} from 'rxjs/Observable';

@Injectable()

export class Uraxservice

{

private _url: string="app/MarketTwoDetails.json"

private _urlAPI: string="http://uraxapiservicepoc2test.azurewebsites.net/ "

constructor(private _httpurl:Http){

}

GetUraxDetails(){

return [

{"id": 1, "name": 'MarketIndia' },

{"id": 2, "name": 'MarketAustralia' },

{"id": 3, "name": 'MarketBrazil' },

{"id": 4, "name": 'MarketRussia' },

{"id": 5, "name": 'MarketUSA' }

]

}

GetDropdownTwo(){

return this._httpurl.get(this._url)

.map((response :Response) => response.json());

//.map((res:Response) => res.json());

}

AddDetails(id: string, parameter1: string, parameter2: string, formula1: string, formula2: string,startdate: string ,enddate: string) {

let body = JSON.stringify({id: id, parameter2: parameter2, formula1: formula1, formula2: formula2, startdate: startdate, enddate: enddate });

let headers = new Headers({ 'content-type': 'application/json' });

let options = new RequestOptions({ headers: headers });

this._httpurl.post("http://uraxapiservicepoc2test.azurewebsites.net/ ", body, options)

.subscribe(

data => console.log(data),

err => console.log(err.json().message),

() => console.log('added Complete')

);

}//

}

 

 component.ts

 

import { Component, OnInit } from '@angular/core';

import { list1 } from './app.marketone';

import {Uraxservice} from './urax.service';

import{SaveDetails} from './SaveDetails';

@Component({

selector: 'my-app',

templateUrl:'../app/app.component.html',

styleUrls: ['app/app.component.css'],

providers: [Uraxservice]

})

export class AppComponent implements OnInit {

selectedlist1:list1;

listA=[]

listB=[]

public details: SaveDetails[];

contentAdded: boolean = false;

constructor( private _uraxservice:Uraxservice){}

ngOnInit()

{

this.listA=this._uraxservice.GetUraxDetails();

this._uraxservice.GetDropdownTwo()

.subscribe(res_ofDTwo =>this.listB=res_ofDTwo);

}

onAddClick(id: string, parameter1: string, parameter2: string, formula1: string, formula2: string,startdate: string ,enddate: string) {

this._uraxservice.AddDetails(id, parameter1, parameter2, formula1, formula2,startdate,enddate)

this.contentAdded = true;

}

}

 

html

 

<nav class="navbar navbar-inverse" >

<div class="container-fluid" style="background-color:black">

<div class="navbar-header">

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

</button>

<a class="navbar-brand" href="#"></a>

<a class="navbar-brand" href="#">

<img src="http://hdwallsource.com/img/2017/2/volvo-logo-wallpaper-59098-60879-hd-wallpapers.jpg" alt="">

</a>

<a class="navbar-brand" href="#">URAX ADMIN TOOL</a>

</div>

</div>

</nav>

<div class="leftCol" style="width: 50%; float:left">

<div class="dropcontainer">

<div id="example1">

<div class="flexibleColumn" style="position:relative;left:5px;top:2px;">

<div id="example1">

<div class="flexibleColumn" style="position:relative;left:5px;top:2px;">

<label>Select Market</label>

<select class="form-control">

<option *ngFor="let list1 of listA" value= {{list1.id}}>

{{list1.name}}

</option>

</select>

</div>

</div>

<div id="example1">

<div class="flexibleColumn" style="position:relative;left:5px;top:2px;">

<label>Select Tax Type</label>

<select class="form-control">

<option *ngFor="let list1 of listB" value= {{list1.id}}>

{{list1.name}}

</select>

</div>

</div>

<div id="example1">

<div class="flexibleColumn" style="position:relative;left:5px;top:2px;">

<label>Select Tax Version</label>

<select class="form-control">

<option value="one">V1</option>

<option value="two">V2</option>

<option value="three">V3</option>

<option value="four">V4</option>

<option value="five">V5</option>

</select>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="contact-form" >

<form method="post" action="/signin" class="form-horizontal" role="form" style="position:relative;left:350px;top:22px;">

<div class="form-group">

<label for="p1" class="col-sm-2 control-label">PARAMETER 1</label>

<div class="col-sm-10">

<input type="text" class="form-control" id="inputtext" >

</div>

</div>

<div class="form-group">

<label for="p1" class="col-sm-2 control-label">PARAMETER 2</label>

<div class="col-sm-10">

<input type="text" class="form-control" id="inputtext" [(ngModel)]="parameter1" >

{{parameter1}}

</div>

</div>

<div class="form-group">

<label for="p1" class="col-sm-2 control-label">FORMULA 1</label>

<div class="col-sm-10">

<input type="text" class="form-control" id="inputtext" [(ngModel)]="parameter2">

{{parameter2}}

</div>

</div>

<div class="form-group">

<label for="p1" class="col-sm-2 control-label">FORMULA 2</label>

<div class="col-sm-10">

<input type="text" class="form-control" id="inputtext" [(ngModel)]="formula1" >

{{formula1}}

</div>

</div>

<div class="form-group" id="datetime">

<label for="p1" class="col-sm-2 control-label">START DATE</label>

<div class="col-sm-10">

<input class="form-control" id="datetimepicker1" name="date" placeholder="MM/DD/YYY" type="text" [(ngModel)]="startdate" />

{{startdate}}

</div>

</div>

<div class="form-group" id="datetime">

<label for="p1" class="col-sm-2 control-label">END DATE</label>

<div class="col-sm-10">

<input class="datepicker" id="date" name="date" placeholder="MM/DD/YYY" type="text" [(ngModel)]="enddate"/>

{{enddate}}

</div>

</div>

<div class="fixed" style="position:relative;left:15px;top:10px;">

<p class = "btnf" style="position:relative;left:15px;top:5px;">

<a class = "btn navbar-btn btn-primary" (click)="onAddClick" href = "#" target = "_texturepack" >SAVE</a>

<a class = "btn navbar-btn btn-primary" href = "#" target = "_texturepack">CANCEL</a>

</p>

</div>