nlr_p nlr_p - 5 months ago 20
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'

@Component({
templateUrl: './components/professional/professional.html',
providers : [GetAllList]
})

export class Professional {
details:IDetails[];

constructor(private _service:GetAllList) { }

click(){
this._service.getList()
.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';

@Injectable()
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

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>
</div>