如何在表格行中显示对象数组

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>

希望它能回答你的问题

【讨论】:

以上是关于如何在表格行中显示对象数组的主要内容,如果未能解决你的问题,请参考以下文章

如何使用带有对象数组的把手显示表格

如何使用react js以表格格式显示对象数据数组

Vue Js Element UI如何在表格列中呈现数组对象

使用 ReactJS 显示多维数组

如何将所有数据提取到拆分行中的雪花对象数组中?

使用 ngFor 在表格中显示嵌套对象到数组