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.
Unfortunately, activation email could not send to your email. Please try again.

Cannot fetch values based on id in angular 2

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 06:14 AM

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.

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.

;