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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Cannot fetch values based on id in angular 2

Thread ID:

Created:

Updated:

Platform:

Replies:

130152 Apr 25,2017 02:36 PM UTC Apr 26,2017 10:14 AM UTC Angular 1
loading
Tags: General
sree
Asked On April 25, 2017 02:36 PM UTC

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

Abinaya Subbiah [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;