来自 web api 的数据，它不在 Html 页面中显示

Question

我尝试创建一个简单的 Angular 应用程序。我正在尝试从 web api 获取数据。问题是数据到达前端（console.log(DataObeject)。

这是我的 service.ts

     employerApiUrl = 'http://localhost:63858/api/';

    //private url: UrlConst;
    constructor(private _httpClient: HttpClient) { }

    // get all employee list

    getAllEmployee(): Observable<Employer>  {
        return this._httpClient.get<Employer>(this.employerApiUrl + 'Employe/getAllEmploye');
    }
}

这里是我的组件 ts

export class EmployerVeiwComponent implements OnInit {

  EmployerList;
  constructor(private _employerDetails: EmployerService) { }

  ngOnInit() {
    this.getEmployee();
  }

  // getting employee data from service 
  getEmployee() {
    this._employerDetails.getAllEmployee()
      .subscribe(
        employerList => employerList = this.EmployerList);
  }
}

这里是我的 html

<table class="table table-condensed">
    <thead>
      <tr>
        <th>Employer ID</th>
        <th>Firs Name</th>
        <th>Last Name <button>&#x2191;</button></th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor = "let employer of EmployerList">
        <td>{{ employer.ID }}</td>

      </tr>
    </tbody>
  </table>

问题来了

这里是控制台结果

它在来自 API 的记录数量表中创建条形图。

Answer 1

问题很少

(i) 你需要将数组初始化为，

EmployerList : any =[];

(ii)将结果分配给 EmployerList 为，

getEmployee() {
    this._employerDetails.getAllEmployee()
      .subscribe(
        employerList => this.EmployerList = employerList );
}

(iii) 在模板中也应该是 id 而不是 ID

<tr *ngFor = "let employer of EmployerList">
     <td>{{ employer.id}} : {{employer.fname}}</td>
</tr>