首页 > 解决方案 > 在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

解决方案


推荐阅读