3
Answers

Problem in inserting data into web API server in Angular2

Karthik Kumar

Karthik Kumar
7y
316
1
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>




 
 
Answers (3)
Next Recommended Forum