Cannot fetch values based on id in angular 2

[sree]

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

Hide   Copy Code

<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

Hide   Copy Code

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

service.ts

Hide   Copy Code

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());
    };
 
    }

[Abinaya Subbiah]

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