Angular 表没有显示任何内容

Question

所以我第一次摆弄Angular，我想做的是从API渲染一个表。 我正在使用 API 和 .NET，我想我设法将所有信息解析到 Web 界面，尽管表格没有显示任何内容。

服务

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse, HttpResponseBase } from '@angular/common/http';
import { Observable } from 'rxjs/';
import { Employee } from './models/employee.model';

@Injectable({
  providedIn: 'root'
})
export class SharedService {
readonly APIUrl="https://localhost:7137/api/Employee";

  constructor(private http:HttpClient) { }

  getEmployeeList(): Observable<Employee[]>{
    return this.http.get<Employee[]>(this.APIUrl);
  }
}

零件

import { Component, OnInit } from '@angular/core';
import { Employee } from 'src/app/models/employee.model';
import { SharedService } from 'src/app/shared.service';
@Component({
  selector: 'app-show-employee',
  templateUrl: './show-employee.component.html',
  styleUrls: ['./show-employee.component.css']
})
export class ShowEmployeeComponent implements OnInit {
  employees: Employee[] = [];
  
  constructor(private service : SharedService) { }

  ngOnInit(): void {
    this.getEmployees();
  }

  getEmployees() {
    this.service.getEmployeeList()
    .subscribe(
      response => {
        this.employees = response;
        console.log(this.employees);
      }
    );
  }
}

HTML

<table class="table table-striped">
    <thead>
        <tr>
            <th>Department</th>
            <th>Name</th>
            <th>Birthday</th>
            <th>Date of joining</th>
            <th>Salary</th>
            <th>Options</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let employee of employees">
            <td>{{employee.employeeDepartment}}</td>
            <td>{{employee.employeeName}}</td>
            <td>{{employee.dateOfBirth}}</td>
            <td>{{employee.dateOfJoining}}</td>
            <td>{{employee.employeeSalary}}</td>
            <td>
                <button type="button" class="btn btn-light mr-1">
                    Edit
                </button>
                <button type="button" class="btn btn-light mr-1">
                    Delete
                </button>
            </td>
        </tr>
    </tbody>
</table>

它呈现表格本身，但内部是空的

component.ts 中的 console.log 返回以下内容：

(6) [{…}, {…}, {…}, {…}, {…}, {…}]
0: {EmployeeID: 1, EmployeeDepartment: 'IT', EmployeeName: John Doe', DateOfBirth: '14.08.1995 0:00:00', DateOfJoining: '01.01.2022 0:00:00', …}
1: {EmployeeID: 3, EmployeeDepartment: 'IT', EmployeeName: 'Jane Doe', DateOfBirth: '13.01.1970 0:00:00', DateOfJoining: '31.12.2018 0:00:00', …}
2: {EmployeeID: 4, EmployeeDepartment: 'Desk', EmployeeName: 'Jack Sparrow', DateOfBirth: '12.06.1983 0:00:00', DateOfJoining: '03.03.2020 0:00:00', …}
3: {EmployeeID: 5, EmployeeDepartment: 'Desk', EmployeeName: 'Julie Moonshine', DateOfBirth: '25.05.1980 0:00:00', DateOfJoining: '01.05.2022 0:00:00', …}
4: {EmployeeID: 6, EmployeeDepartment: 'IT', EmployeeName: 'Victor Vaugh', DateOfBirth: '23.04.1997 0:00:00', DateOfJoining: '01.12.2021 0:00:00', …}
5: {EmployeeID: 7, EmployeeDepartment: 'Boss', EmployeeName: 'Elizabeth Grey', DateOfBirth: '24.04.1954 0:00:00', DateOfJoining: '14.05.1990 0:00:00', …}
length: 6

因此，据我了解，来自 API 的数据是正确传递的。 我彻底搜索了互联网，但仍然不知道问题可能是什么。

我的 Angular 代码主要基于 yt 教程，因为这是我第一次使用它，并且对于这些教程的创建者来说，相同的解决方案似乎工作得很好。

谢谢你的帮助

Answer 1

您的密钥与控制台中的密钥不同。

虽然它们相同但区分大小写。 您正在调用带有小写首字母的键，但是首字母大写，例如它应该是employee.EmployeeName 而不是employee.employeeName。 所有其他键也是如此。

Answer 2

您应该使用数据序列化程序，将您的响应数据转换为驼峰式大小写（这是 json 属性名称大小写的标准）。 这就是您能够在表格中显示数据的方式。

否则，您必须使用与.Net api 型号相同的外壳，才能在 angular 表中显示数据。 我强烈建议使用序列化程序来响应数据驼峰式案例。