Problem in inserting data into web API server in Angular2

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 TOOLa>
    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 Marketlabel>
<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 Typelabel>
<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 Versionlabel>
<select class="form-control">
    <option value="one">V1option>
    <option value="two">V2option>
    <option value="three">V3option>
    <option value="four">V4option>
    <option value="five">V5option>
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 1label>
    <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 2label>
    <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 1label>
    <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 2label>
    <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 DATElabel>
    <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 DATElabel>
    <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" >SAVEa>
     <a class = "btn navbar-btn btn-primary" href = "#" target = "_texturepack">CANCELa>
p>
div>

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Satheesh Elumalai9y ago
Visual studio code run default localhost something http://localhost:xxxx so first Web Api call crossplatform enable first one .
[EnableCors(origins: "http://localhost:xxxx", headers: "*", methods: "*")]
add webconfig.cs --> config.EnableCors();
upload Api to azure the check it.
Sujeet Raman9y ago
using inspect element i tried..no value.after clicking button page is reloading..cant see the inserted values
Suvendu Shekhar Giri9y ago
Tried debugging?