js动态的添加tr td，我创建了一个数组把要写入的内容都写进去了，下面是我的代码，求老师指点

Posted 2023-04-06

js动态的添加tr td，我创建了一个数组把要写入的内容都写进去了，下面是我的代码，求老师指点最后一张图片是我要实现的内容

原声js中如果你想创建tr和td而且是很多个，只能用循环往里面塞值了。简单的写了一下，仅供参考~~ 参考技术A 这位哥们儿还是姐们儿，你的图压根看不清啊，能不能截图？

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

【中文标题】如何将表 tr 和 td 与角度 11 中的对象数组绑定

【英文标题】：How to bind a table tr and td with an object array in angular 11

【发布时间】：2021-08-12 11:38:36

【问题描述】：

我正在尝试使用数组列表生成一个表。我想根据以下数据生成 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 响应数据

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

【参考方案1】：

我认为此链接可以帮助您： .

Showing array of object in mat table

【讨论】：

我没有使用材料设计

【参考方案2】：

经过研究，我在详细信息here 中找到了键值管道，它解决了我的问题。以下是我的解决方案，将来可能会对其他人有所帮助。

<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>