如何在子组件angular中使用*ngFor作为表格
人民币
我想显示一个用户表，因此：我必须将<tr>标签放入循环中(*ngFor)
用户组件.html：
<div class="theme-2">
<div class="example-container mat-elevation-z8">
<app-user *ngFor="let user of users" [user]="user"></app-user>
</div>
</div>
和UserComponent.html：
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Email</th>
<th>Created_at</th>
<th>Updated_at</th>
</tr>
<tr>
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.created_at }}</td>
<td>{{ user.updated_at }}</td>
</tr>
</table>
现在结果！ 
所有表格标签都进入了 *ngFor ，我该如何解决这个问题？
错误
在*ngFor餐桌上，不是组件去。现在您正在创建app-user组件的大量副本，这不是您想要的。
<app-user [users]="users"></app-user>
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Email</th>
<th>Created_at</th>
<th>Updated_at</th>
</tr>
<tr *ngFor="let user of users">
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.email }}</td>
<td>{{ user.created_at }}</td>
<td>{{ user.updated_at }}</td>
</tr>
</table>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
如何在旧版Matlab中使用表格？
- 2
如何在Angular 2的组件中使用管道？
- 3
我如何在angular2中使用给定参数redirectTo子组件
- 4
如何在Angular Material中使用项目组件
- 5
如何在Angular组件中使用嵌套的flexbox？
- 6
如何在父组件中使用子组件的状态？
- 7
如何在React Native中使用道具从Grand Parent组件到子组件的方法？
- 8
在Angular中使用子组件的属性？
- 9
如何在Angular 9中使用“懒加载”使用子组件的事件属性绑定父组件
- 10
如何在React中使用表单作为组件
- 11
Vue：如何在组件绑定中使用变量作为数组键
- 12
如何在组件中使用useHook而不是使用react和typescript将它返回的值作为prop传递给组件？
- 13
如何在Angular中使用* ngFor生成的<canvas>
- 14
如何在Google表格中使用GETPIVOTDATA
- 15
如何在表格的单元格中使用颜色作为选项
- 16
如何在作为“ prop”传递给子组件的函数中使用“ this”？
- 17
如何在CSS中使用表格或使用表格？
- 18
如何在表格中使用find方法
- 19
我如何在angular2中使用给定参数redirectTo子组件
- 20
如何在angular2 formControl中使用ngFor
- 21
如何在父组件中使用Vue.js子组件中的数据？
- 22
如何在Angular 2中使用* ngFor = let值作为html属性值
- 23
如何在 *ngFor 中使用服务数据
- 24
如何在 angular 中使用动态加载的模块组件中的现有组件
- 25
如何在 Angular 中使用带有表格的 ngClass
- 26
如何在子组件中使用禁用属性以及如何动态传递函数？
- 27
如何在 Angular 7 应用程序中使用 GWT 应用程序作为组件？
- 28
如何在父组件中使用来自子组件的 ngModel？
- 29
如何在 angular 4 中使用 ngFor 动态渲染 svg
我来说两句