时间戳

首页 > 解决方案 > 如何将表 tr 和 td 与角度 11 中的对象数组绑定

html - 如何将表 tr 和 td 与角度 11 中的对象数组绑定

问题描述

我正在尝试使用数组列表生成一个表。我想根据以下数据生成 TR 和 TD。当我有一个数据时，它按预期工作，在 TR 属性中添加一个 ngfor。我想根据 API 结果重复 TR 和 TD。这是我尝试过的代码示例。

<table class="table align-items-center table-dark table-flush">
<tbody>
<tr class="col-sm-12 col-md-12 col-lg-12 col-xl-12" *ngFor="let Item of BitData;">
  <td class="pad1" *ngFor="let dataItem of Item;">
    <div class="media align-items-center">
      <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 pad1">
        <div class="card card-stats mb-4 mb-xl-0 bg-gradient-info">
          <div class="card-body">
            <div class="row border">
              <div
                [ngClass]="dataItem.PLANNED_HOLE_SECTION == dataItem.ACTUAL_HOLE_SECTION ? 'col bg-gradient-success' : 'col bg-gradient-warning'">
                <h5 class="h5 card-title text-white mb-0 font-sm">Hole Size</h5>
                <h5 class="h5 font-weight-bold font-md">{{dataItem.PLANNED_HOLE_SECTION}}</h5>
              </div>
              <div
                [ngClass]="dataItem.PLANNED_HOLE_SECTION == dataItem.ACTUAL_HOLE_SECTION ? 'col bg-gradient-success' : 'col bg-gradient-warning'">
                <h5 class="h5 card-title text-white mb-0 font-sm">Hole Size</h5>
                <h5 class="h5 font-weight-bold font-md">{{dataItem.ACTUAL_HOLE_SECTION}}</h5>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
  </td>
</tr>
</tbody>
</table>

这是 API 响应数据

API 响应数据

我期待第一行中的 Table1，第二行中的 Table2 等。我在控制台中遇到错误，例如Error trying to diff '[object Object]'。只允许使用数组和可迭代对象。我是角度的新手，对此高度赞赏的任何帮助。

标签： htmltypescriptngforangular11

解决方案

After my research I found keyvalue pipes in detailes here and its solved my problem. Below is my solution, may help others in future.

<table class="table align-items-center table-dark table-flush">
 <tbody>
 <tr class="col-sm-12 col-md-12 col-lg-12 col-xl-12" *ngFor="let item of BitData | keyvalue">
   <td class="pad1" *ngFor="let dataItem of item.value | keyvalue">
    <div class="media align-items-center">
      <div class="col-sm-12 col-md-12 col-lg-12 col-xl-12 pad1">
        <div class="card card-stats mb-4 mb-xl-0 bg-gradient-info">
          <div class="card-body">
            <div class="row border">
              <div
                [ngClass]="dataItem.value.PLANNED_HOLE_SECTION == dataItem.value.ACTUAL_HOLE_SECTION ? 'col bg-gradient-success' : 'col bg-gradient-warning'">
                <h5 class="h5 card-title text-white mb-0 font-sm">Hole Size</h5>
                <h5 class="h5 font-weight-bold font-md">{{dataItem.value.PLANNED_HOLE_SECTION}}</h5>
              </div>
              <div
                [ngClass]="dataItem.value.PLANNED_HOLE_SECTION == dataItem.value.ACTUAL_HOLE_SECTION ? 'col bg-gradient-success' : 'col bg-gradient-warning'">
                <h5 class="h5 card-title text-white mb-0 font-sm">Hole Size</h5>
                <h5 class="h5 font-weight-bold font-md">{{dataItem.value.ACTUAL_HOLE_SECTION}}</h5>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </td>
</tr>
</tbody>
</table>

推荐阅读