我正在尝试使用http get调用显示来自db的记录,但最后我无法做到这一点,我不确定错误在哪里,
我的组件:
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);
}
}
我对HTTP请求的服务:
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)));
}
}
我的简单模板:
<button click = "click()" >v</button>{{details}}
答案 0 :(得分:2)
要绑定到您需要使用(event)='expression'
语法的事件,请执行以下操作:
<button (click)="click()" >v</button>
<div *ngFor="let detail of details">
<div>Firstname: {{detail.firstname}}</div>
<div>Lastname: {{detail.lastname}}</div>
</div>