nlr_p nlr_p - 1 year ago 116
HTML Question

get call for angular2 failed to bind data

I am trying to display the records from db using http get call,but finally i am not able to do that and i am not sure where the error was,

My component:

import { Component} from '@angular/core';
import {Http, Response, Headers} from '@angular/http';
import {Observable} from 'rxjs/Observable';
import {Subject } from 'rxjs/Subject';
import {Control,FormBuilder,ControlGroup,Validators} from '@angular/common';
import { IDetails } from './pro';
import {GetAllList } from './service'

templateUrl: './components/professional/professional.html',
providers : [GetAllList]

export class Professional {

constructor(private _service:GetAllList) { }

.subscribe(details => this.details = details);

My service for the HTTP request:

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';

import { IDetails } from './pro';

export class GetAllList {
private _productUrl = 'http://localhost/angular/index.php/profile/getProfile';

constructor(private _http: Http) { }

getList(): Observable<IDetails[]> {
return this._http.get(this._productUrl)
.map((response: Response) => <IDetails[]> response.json())
.do(data => console.log('All: ' + JSON.stringify(data)));


My simple template:

<button click = "click()" >v</button>{{details}}

Answer Source

To bind to events you need to use the (event)='expression' syntax like this:

<button (click)="click()" >v</button>
<div *ngFor="let detail of details">
    <div>Firstname: {{detail.firstname}}</div>
    <div>Lastname: {{detail.lastname}}</div>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download