如何在表格行中显示对象数组
Posted
技术标签:
【中文标题】如何在表格行中显示对象数组【英文标题】:How to display array of objects in a table row 【发布时间】:2020-01-27 10:29:42 【问题描述】:下面是员工详细信息数组,其中包含对象我想在表格行中显示员工详细信息:
this.employeedetails = [
id: 1, firstname: 'AM', lastname:'CM', age:3 ,
id: 1, firstname: 'AM', lastname: 'DIM', age:4 ,
id: 1, firstname: 'AM', lastname: 'FM', age:5 ,
id: 1, firstname: 'AM', lastname: 'HM', age:6 , ];
这就是我试图在 html 文件中打印我的数组的方式
员工详情
【问题讨论】:
变量名没有空格 How to use Angular2 templates with *ngFor to create a table out of nested arrays?的可能重复 【参考方案1】:更正您的变量名称,例如:
this.employeeDetails = [
id: 1, firstName: 'AM', lastName:'CM', age:3 ,
id: 1, firstName: 'AM', lastName: 'DIM', age:4 ,
id: 1, firstName: 'AM', lastName: 'FM', age:5 ,
id: 1, firstName: 'AM', lastName: 'HM', age:6 ];
那么对于表:
<table >
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let employee of employeeDetails ">
<th scope="row"> employee.id</th>
<td> employee.firstName</td>
<td> employee.lastName</td>
<td> employee.age</td>
</tr>
</tbody>
</table>
【讨论】:
【参考方案2】:首先你的json应该是无效的
employeeDetails = [
id: 1, firstName: 'AM', lastName:'CM', age:3 ,
id: 1, firstName: 'AM', lastName: 'DIM', age:4 ,
id: 1, firstName: 'AM', lastName: 'FM', age:5 ,
id: 1, firstName: 'AM', lastName: 'HM', age:6 , ];
然后用户*ngFor
在html中喜欢
<table>
<tr>
<td>First name</td>
<td>Last name</td>
</tr>
<tr *ngFor="let item of employeeDetails">
<td>item.firstName</td>
<td>item.lastName</td>
</tr></table>
demo
【讨论】:
【参考方案3】:首先去掉数组名之间的空格 它可以是employee_details 你可以这样做
<table>
<thead>
<tr>
<th> First Name </th>
<th> Lats Name </th>
<th> Age </th>
</tr>
</thead>
<tbody>
<tr *ngFor= let array of employee_details>
<td> array.first </td>
<td> array.last_name </td>
<td> array.age </td>
</tr>
</tbody>
</table>
希望它能回答你的问题
【讨论】:
以上是关于如何在表格行中显示对象数组的主要内容,如果未能解决你的问题,请参考以下文章