Question

我正在制作.net核心的CURD API，并尝试在Angular 2应用程序中使用该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() });;

     }
    }

2）组件文件Employee.Component.ts

import { Component, Input } from '@angular/core';
import { RouterModule, Router, ActivatedRoute, Data } from '@angular/router';
import { empservice } from './emp.service';
@Component({
selector: 'my-emp',
templateUrl: 'app/employee/Emp.html',
styleUrls: ['app/CSS/stylesheet.css', 'app/CSS/media.css'],

 })
export class Employee {   
public employee: employee[];
 public ngOnInit() {
    this.AllEmployee();

    $(document).ready(function () {
        $('#emptble').DataTable();
    });

}
AllEmployee() {

   this._employeeservice.GetAllEmployee().subscribe(empdata => 
   this.employee = empdata);



 }
 }  
 export  interface employee {
ID: any;
Fname: string;
Lname: string;
Age: any;
Mobile: any;
Phone: any;


 }

3）HTML代码

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

我没有得到此代码的预期输出。在表格单元格中未显示员工名称，id，年龄等信息。 API调用正确完成，数据从API转换为角度数据，但我不明白为什么该数据未与角度html页面绑定。

Answer 1

您似乎根本没有调用AllEmployee()方法，因此似乎没有进行API调用。相反，您应该将其放在ngOnInit() lifecycle hook中。

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

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

侧面说明：您仍在使用Http服务，该服务已在4.3版中弃用。您应该切换到新的HttpClient。

Answer 2

您应该使用ngOnInit()生命周期挂钩

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

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

2 个答案: