Angular 7 - 使用 *ngFor 显示数据时出现问题(数据未显示)
Angular 7 - issue displaying data with *ngFor (data not showing)
我有以下 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 // that contains the data from an api
我该如何解决这个问题?
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>
我有以下 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 // that contains the data from an api
我该如何解决这个问题?
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>