Angular组件无法显示API返回数据问题求助

核心问题 #

1. 字段大小写不匹配：API返回的是小写开头的属性（id, name, email等），但你的Employee接口和HTML模板中使用的是大写开头的属性（Id, Name, Email等），JS/TS是大小写敏感语言，导致无法正确读取属性值，显示空白。
2. HTML模板硬编码值：除employee.Id外，其他单元格都是固定的1/2/3/4，未绑定实际数据。

解决方案 #

1. 修正Employee接口字段名 #

将接口字段改为和API返回一致的小写开头：

export interface Employee 
{
    id: string;
    name: string;
    email: string;
    phone: number;
    salary: number;
    department: string;
}

2. 修正HTML模板数据绑定 #

替换硬编码值，使用正确的小写开头属性：

<div class="container my-5">
    <h1 class="mb-3">Employees</h1>
    <table class="table">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Salary</th>
            </tr>
        </thead>

        <tbody>
            <tr *ngFor="let employee of employees">
                <td>{{employee.id}}</td>
                <td>{{employee.name}}</td>
                <td>{{employee.email}}</td>
                <td>{{employee.phone}}</td>
                <td>{{employee.salary}}</td>
            </tr>
        </tbody>
    </table>
    <!-- <p *ngIf="!employees || employees.length == 0">No Employees</p> -->
</div>

原理说明 #

TypeScript的泛型类型断言（Observable<Employee[]>）仅在编译阶段做类型检查，运行时API返回的对象属性是小写开头。当你用employee.Id去访问时，对象中不存在该属性，返回undefined，因此单元格显示空白。保持接口字段与API返回一致，是最直接的解决方式。

内容的提问来源于stack exchange，提问作者Jeroneey