Javascript .net核心API和Angular2中的数据绑定

我正在制作.NETCore的curdAPI，并尝试在Angular2应用程序中使用该API

1） 服务文件EmployeeService.ts

    import { Injectable } from '@angular/core';
    import { Http, Response, RequestOptions, Headers } from '@angular/http';
    import 'rxjs/Rx';
    import { Observable } from 'rxjs/Observable';
    import 'rxjs/add/operator/map';
    import { employee } from "../employee/emp"

    @Injectable()
    export class empservice {

    //step 1: Add url of the .net api (get that by running .net api using F5)
    private _url: string = "http://localhost:65088/api/Employee";
    constructor(private _http: Http) { }
    //step 2 : Method to get value from  url 

    GetAllEmployee(): Observable<employee[]> {   

    return this._http.get(this._url).map((res: Response) => { return 
   <employee[]>res.json() });;

     }
    }

3） HTML代码

{{emp.ID}
{{emp.Fname}
{{emp.Lname}
{{emp.Age}
{{emp.Mobile}}
{{emp.Phone}

我没有得到这段代码的预期输出。 它不会在表格单元格中显示员工的姓名、id、年龄等详细信息。

---

API调用是正确的，数据来自API到angular，但我不明白为什么这些数据不与angular html页面绑定

您似乎根本没有调用

AllEmployee（）

方法，因此似乎没有进行API调用。 相反，您应该将其放入

ngOnInit（）

中

export类Employee实现OnInit{
公共雇员：雇员[]；
恩戈尼尼特（）{
这是._employeeservice.GetAllEmployee（）
.订阅（（数据）=>this.employee=数据）；
}

---

旁注：您仍在使用版本4.3中不推荐使用的

Http

服务。您应该切换到新的

HttpClient

您应该使用

ngOnInit（）

生命周期挂钩

ngOnInit() {
//call here in your data binding method
}

<table>
        <tr *ngFor="let emp of employee">
            <td scope="row">{{emp.ID}}</td>
            <td>{{emp.Fname}}</td>
            <td>{{emp.Lname}}</td>
            <td>{{emp.Age}}</td>
            <td>{{emp.Mobile}}</td>
            <td>{{emp.Phone}}</td>
            <td>
                <i style="cursor:pointer;" class="glyphicon glyphicon-edit 
            pointer"
                   (click)="Update(employee.ID)" title="Edit" data- 
            target="#update"></i>&nbsp;&nbsp;
                <i style="cursor:pointer;" class="glyphicon glyphicon-trash 
              pointer"
                   (click)=" delete(employee.ID)" title="Delete"> 
          </i>&nbsp;&nbsp;
                <i style="cursor:pointer;" class="glyphicon glyphicon-user 
             pointer"
                   (click)="openModal(employee.ID)" title="Details" data- 
          target="#details"></i>
            </td>
        </tr>

    </table>

export class Employee implements OnInit {   
  public employee: employee[];

  ngOnInit() {
      this._employeeservice.GetAllEmployee()
          .subscribe((data) => this.employee = <employee[]>data);
  }

ngOnInit() {
//call here in your data binding method
}