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

【问题标题】：How to bind a table tr and td with an object array in angular 11如何将表 tr 和 td 与角度 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 新手，对此高度赞赏。

【问题讨论】：

标签： html typescript ngfor angular11

【解决方案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>

【讨论】：