获取对 angular2 的调用无法绑定数据

Question

我正在尝试使用 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}}

Answer 1

要绑定到事件，您需要使用 (event)='expression' 语法，如下所示：

<button (click)="click()" >v</button>
<div *ngFor="let detail of details">
    <div>Firstname: {{detail.firstname}}</div>
    <div>Lastname: {{detail.lastname}}</div>
</div>