Angular 7 - 使用 *ngFor 显示数据的问题（数据未显示）答案

【问题标题】：Angular 7 - issue displaying data with *ngFor (data not showing)Angular 7 - 使用 *ngFor 显示数据的问题（数据未显示）
【发布时间】：2019-09-15 08:37:26
【问题描述】：

我有下面的 Json 示例，我试图在 *ngFor 中绑定它：

[
    {
        "employeeId": 1,
        "name": "johnny",
        "dob": "4/20/1992 12:00:00 AM",
        "salary": "100"
    },
    {
        "employeeId": 2,
        "name": "test",
        "dob": "10/10/2000 12:00:00 AM",
        "salary": "100"
    },
    {
        "employeeId": 3,
        "name": "Johnny Rahme",
        "dob": "1/10/2001 12:00:00 AM",
        "salary": "100"
    }
]

在我的 app.component.html 我有这个：

<table class='table'>
<thead>
  <tr>
    <th>EmployeeId</th>
    <th>Name</th>
    <th>DOB</th>
    <th>Salary</th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let emp of empList">
    <td>{{ emp.EmployeeId }}</td>
    <td>{{ emp.Name }}</td>
    <td>{{ emp.DOB }}</td>
    <td>{{ emp.Salary }}</td>
    <td>
  </tr>
</tbody>
</table>

在我的 app.component.ts 我有：

this.empList = data // 包含来自 api 的数据

我该如何解决这个问题？

【问题讨论】：

标签： angular ngfor

【解决方案1】：

tempalte 中的属性名称与组件中的对象不同。请注意，模板中属性名称的第一个字母都是大写的，而在您的组件中，所有字母都是小写的。请使用以下内容更改您的模板。

<table class='table'>
    <thead>
        <tr>
            <th>EmployeeId</th>
            <th>Name</th>
            <th>DOB</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let emp of empList">
            <td>{{ emp.employeeId }}</td>
            <td>{{ emp.name }}</td>
            <td>{{ emp.dob}}</td>
            <td>{{ emp.salary }}</td>
            <td>
        </tr>
    </tbody>
</table>

Demo

【讨论】：