调用angular2无法绑定数据

时间:2016-06-27 14:35:37

标签: html angularjs angular

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

1 个答案:

答案 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>