Angular 如何在表行中显示对象数组
下面是包含对象的employee details数组。我想在表行中显示员工详细信息:Angular 如何在表行中显示对象数组,angular,typescript,Angular,Typescript,下面是包含对象的employee details数组。我想在表行中显示员工详细信息: 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
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文件中打印数组的方式
{{employeedetails}首先,您的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 }, ];
然后使用html格式的用户*ngFor
,就像
<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>
名字
姓
{{item.firstName}
{{item.lastName}
更正变量名称,如:
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>
身份证件
名字
姓
年龄
{{employee.id}
{{employee.firstName}
{{employee.lastName}
{{employee.age}
首先删除数组名称之间的空格
它可以是员工的详细信息
你可以这样做
<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>
名字
Lats名称
年龄
{{array.first}
{{array.last_name}
{{array.age}
希望它能回答您的问题变量名无空格可能重复