angular - 在Angular中使用ngFor在表中生成多行
问题描述
我有一个对象,我需要创建一行来显示其数据和另一行来填充一些值。如果我使用 ngFor,那么我可以在一行中填充数据或显示要填充的列。我不能一起做。如果我使用 ng-template,那么仅对于第一行,我就会得到两者的组合。请指教。
<tbody>
<ng-container *ngFor="let request of assignedRequestFilteredValue | orderBy: 'modifiedDate' :true | paginate: {itemsPerPage: itemsPerPage, currentPage: currentPage}; let i = index">
<tr class="visible-row" >
<td><button class="btn btn-plain btn-sm accordion-toggle" data-toggle="collapse" data-target="#demo2"><span
class="icon-gdpns_right"></span></button></td>
<td>{{request.elecCommodity.name}}</td>
<td><input type="text" class="form-control form-control border-form-control"></td>
<td>{{request.elecWflNewAmlitem[0].elecWflNewCommentHistoryAmlitem[0].comment}}</td>
<td>{{request.elecWflNewAmlitem[0].customerMfrname}}</td>
<td>{{request.elecWflNewAmlitem[0].customerMpn}}</td>
<td>{{request.elecWflMasterCEStatus.description}}</td>
<td>{{request.partNumberStatus.description}}</td>
<td><button type="button" class="btn btn-md btn-outline-blue" data-toggle="modal" data-target="#myModal">View
Details</button></td>
</tr>
<tr class="hidden-row">
<td colspan="9" class="p-0">
<div class="accordian-body collapse" id="demo2" style="padding:0.75rem">
<app-ce-new-part-validation></app-ce-new-part-validation>
</div>
</td>
</tr>
</ng-container>
</tbody>
预期结果应如下所示:
第 1 行数据 第 1 行填充数据
第 2 行数据 第 2 行填充数据
第 3 行数据 第 3 行填充数据
解决方案
推荐阅读
- angular - 如何确保侧边栏填满页面(Angular + ng-bootstrap + angular material)
- azure-devops - 本地 Azure DevOps 服务器:不允许创建任务或将任务移动给贡献者
- javascript - main.js:95 WebSocket 连接到 'wss://website' 失败:(
- legend - 如何防止绘图图例的宽度限制图表数据的可用空间?
- c# - 将带有图像的列表导出到 Excel
- python - 如何解决浮点计算问题?
- javascript - 如何使用 child_process 从节点内运行 diskpart 命令?
- python - Pandas - 在 groupby 语句之后为均值和标准添加列
- html - 如何在纸上以多列呈现 HTML 表格?
- python-3.x - 基于多列的索引