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

Answer 2

  @CrossOrigin(origins = "*")  add this in your controller