Data from web api and it's not Display in Html page

Issue

I try to create a simple angular application. I'm trying to get data from web api. Issue is data is come to the front end (console.log(DataObeject).

here is my 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');
    }
}

and here the my componets 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);
  }
}

an here my 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>

here the issue

here the console result

It's creating bars in table amount of records coming from API.

Solution

There are few issues

(i) You need to initialize the array as,

EmployerList : any =[];

(ii)Assign the result to the EmployerList as,

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

(iii) Also it should be id not ID in template

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

Answered By - Sajeetharan