如何以角度方式向 html 发送 REST 响应？

Question

我能够从我的应用程序中的 REST API 获取数据，我能够将数据打印到控制台，但不知道如何显示在 html 上，有人可以帮助我吗？

应用程序组件.ts

import { HttpClient } from '@angular/common/http';

import { Component, Inject } from '@angular/core';

import { Employee } from './employee';

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent {

  title = 'emp-data-example';

  employees:Employee[]=[];

  constructor(@Inject(HttpClient) private http:HttpClient){

  }

  ngOnInit(){

    this.http.get("http://localhost:8080/api/all").subscribe(

    response=>{

      this.employees=response; // here is error because response is an Object and employees is an array

    });

    //resp.subscribe((data)=>{this.employees=data});

    

  }

}

应用程序组件.html

<div>

  <table border="1">

    <tr>

      <th>Emp Id</th>

      <th>Emp Name</th>

      <th>Salary</th>

    </tr>

    <tr ngFor="let employee of employees">

      <td>{{employee.id}}</td>

      <td>{{employee.name}}</td>

      <td>{{employee.department}}</td>

      <td>{{employee.salary}}</td>

    </tr>

  </table>

</div>

Answer 1

尝试设置对 Employee 的响应类型并将其添加到数组中，如下所示：&nbsp; &nbsp; this.http.get("http://localhost:8080/api/all").subscribe(&nbsp; &nbsp; (response: Employee[]) =>{&nbsp; &nbsp; &nbsp; this.employees.push(...response);&nbsp; &nbsp; });

Answer 2

因为您在响应中获取数组并且它来自员工类型，所以应该是这样的：this.http.get("http://localhost:8080/api/all").subscribe((response: Array<Employee>) =>{&nbsp; this.employees = response;});