We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Cannot fetch values based on id in angular 2

i need to bind values getting by an id..in html am passing one id based on that i need to fetch,bind and update.i am not able to find out what am missing



my html

<form *ngFor="let country of Countrylist">
<div class="form-group">
<input type="text"  ngControl="ID" [(ngModel)]="ID">
<button (click)="sendValues(ID)">Search</button>
 <label>Market Name</label>
<input   ngControl="MName" [(ngModel)]="country.MName">
 <label>Market Code</label>
<input   ngControl="MCode" [(ngModel)]="country.MCode">
</div>
 
</form>



component.ts
sendValues(ID) {
this._httpService.Searchcode(ID)
.subscribe(response => {
this.resmessage = response;
});
} 


service.ts

Searchcode(ID)
{
var header = new Headers();
            header.append('Content-type', 'application/json');
      return this._http.get("http://uraxapiservicepoc2test.azurewebsites.net/api/market/1",{headers:header})
      .map((response:Response)=>response.json());
    };
 
    }

1 Reply

AS Abinaya Subbiah Syncfusion Team April 26, 2017 10:14 AM UTC

Hi Sree, 

Thanks for contacting Syncfusion support. 

We have analyzed the given code snippets, in which we appended given ID with server URL to fetch the data and bound those values into form inputs Market Name and Market Code. Refer to the below for modified snippets. 

[app.component.html] 
<input name="uniqueid" type="text" ngControl="ID" [(ngModel)]="ID"> 
 
<button (click)="sendValues(ID)">Search</button> 
 
<form *ngFor="let country of Countrylist"> 
    <div class="form-group"> 
        <label>Market Name</label> 
        <input name="name" ngControl="MName" [(ngModel)]="country.MName"> 
        <label>Market Code</label> 
        <input name="code" ngControl="MCode" [(ngModel)]="country.MCode"> 
    </div> 
</form> 
 
[app.component.ts] 
import { Component, ViewEncapsulation } from '@angular/core'; 
import { searchService } from './service'; 
 
. . .  
export class AppComponent { 
  . . .  
 
  sendValues(ID) { 
    this._httpService.Searchcode(ID) 
      .subscribe(response => { 
        this.Countrylist = response; 
      }); 
  } 
} 
 
[service.ts] 
Searchcode(ID) { 
        var header = new Headers(); 
        header.append('Content-type', 'application/json'); 
        return this._http.get("http://uraxapiservicepoc2test.azurewebsites.net/api/market/" + ID, { headers: header }) 
            .map((response: Response) => response.json()); 
    }; 
 
 
We recommend you to go through HTTP module to explore about send and receive data from server. 

Regards, 
Abinaya S 


Loader.
Live Chat Icon For mobile
Up arrow icon