Question

在这里我使用Angular2请帮助我为什么我不能在ngFor

绑定数据

 <table>
        <tr>
            <td>EmpId</td>
            <td>EmpName</td>
        </tr>
        <tr *ngFor="let emp of Employee">
            <td>{{emp.Emp_Id}}</td>
            <td>{{emp.EmpName}}</td>
          </tr>
    </table>

这是我的Angular2代码Employee.ts是我的专栏名称

ANgular2

export class Employee {
    Emp_Id: number;
    EmpName: string;
    Email: string;
    Psw: string;

}
        getData() {
                return this._http.get(this.Url).map(this.extractData).catch(this.handleError).subscribe;
    private extractData(res: Response) {
            let body = res.json();
            return body.data || {};

Answer 1

您需要创建服务并通过服务访问API，然后在组件内部使用

您的组件代码将是这样的，

  getData(){
        return this._HttpService.getEmpData()
            .subscribe(data => this.Employees = data, error => alert('This is error...'),
         () => console.log());
    }

和 service.ts

getEmpData(): Observable<Employee[]> {
        debugger;
        return this._http.get(this.Url).map(this.extractData).catch(this.handleError);

    }
    private extractData(res: Response) {
        let body = res.json();           
        return body|| {};
    }
    private handleError(error: Response | any) {
        // In a real world app, you might use a remote logging infrastructure
        let errMsg: string;
        if (error instanceof Response) {
            const body = error.json() || '';
            const err = body.error || JSON.stringify(body);
            errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
        } else {
            errMsg = error.message ? error.message : error.toString();
        }
        console.error(errMsg);
        return Observable.throw(errMsg);
    }

Answer 2

您在Employee变量中需要员工变量你需要像

这样的东西

Employees:Employee[];
Employees=getdata();
<table>
        <tr>
            <td>EmpId</td>
            <td>EmpName</td>
        </tr>
        <tr *ngFor="let emp of Employees:Employees">
            <td>{{emp.Emp_Id}}</td>
            <td>{{emp.EmpName}}</td>
          </tr>
    </table>

ng不绑定数据

2 个答案: