【问题标题】：Display a table based on an array without using table elements but using display properties不使用表格元素但使用显示属性显示基于数组的表格
【发布时间】：2020-05-26 11:32:30
【问题描述】：

嗨，我已经使用显示属性创建了一个表，现在我有一个数组，我想遍历该数组并 pring 列和行的值，这是我的代码：- html:=

<div id='table'>
  <!-- table head -->
  <div id="thead">
<div class="table-row">
  <div class="table-cell">head 1</div>
  <div class="table-cell">head 2</div>
</div>
    </div>
    <!-- table body -->
    <div id="tbody">
      <div class="table-row">
        <div class="table-cell">cell 1.1</div>
        <div class="table-cell">cell 1.2</div>
      </div>
      <div class="table-row">
        <div class="table-cell">cell 2.1</div>
        <div class="table-cell">cell 2.1</div>
      </div>
    </div>
    <!-- table foot -->
    <div id="tfoot">
      <div class="table-row">
        <div class="table-cell">foot 1</div>
        <div class="table-cell">foot 2</div>
      </div>
    </div>
    <!-- table end -->
  </div>

css:

div {
         padding: 5px;
      }
  #table {
    margin: 0 auto;
    display: table;
    border: 1px solid green;
  }

  .table-row {
    display: table-row;
  }

  .table-cell {
    width: 150px;
    text-align: center;
    display: table-cell;
    border: 1px solid black;
  }

  #thead {
    display: table-header-group;
    color: white;
    background-color: red;
  }

  #tbody {
    display: table-row-group;
    background-color: yellow;
  }

  #tfoot {
    display: table-footer-group;
    color: white;
    background-color: blue;
  }

ts 文件 :=

auditViews : any = [
{
  "id" : "log1",
  "name" : "Audit log 1",
  "description" : "Descrition of audit log 1",
  "status" : "active"
},
{
  "id" : "log2",
  "name" : "Audit log 2",
  "description" : "Descrition of audit log 2",
  "status" : "active"
},
{
  "id" : "log3",
  "name" : "Audit log 3",
  "description" : "Descrition of audit log 3",
  "status" : "active"
}];

这是静态的，不知何故，我需要列标题是 id、名称、描述和状态，以及下面的值。

【问题讨论】：

标签： angular html-table multiple-columns ngfor ng-bind

【解决方案1】：

HTML

<div id='table'>
  <!-- table head -->
  <div id="thead">
    <div class="table-row">
      <div class="table-cell" *ngFor='let data of auditViews[0] | keyvalue'>{{data?.key}}</div>
    </div>
    </div>
    <!-- table body -->
    <div id="tbody">
      <div class="table-row" *ngFor='let data of auditViews'>
        <div class="table-cell">{{data?.id}}</div>
        <div class="table-cell">{{data?.name}}</div>
        <div class="table-cell">{{data?.description}}</div>
        <div class="table-cell">{{data?.status}}</div>
      </div>
    </div>
    <!-- table foot -->
    <div id="tfoot">
      <div class="table-row">
        <div class="table-cell">foot 1</div>
        <div class="table-cell">foot 2</div>
      </div>
    </div>
    <!-- table end -->
  </div>

Working Example

PS：如果您更改 JSON 的格式方式，您可以避免双循环/迭代，这是此解决方案的优化版本。

优化版

HTML

<div id='table'>
  <div id="thead">
    <div class="table-row" *ngFor='let data of auditViews; let i = index'>
      <ng-container *ngFor='let data of data | keyvalue'>
        <div *ngIf='!i' class="table-cell" >{{data?.key}}</div>
        <div *ngIf='i' class="table-cell" >{{data?.value}}</div>
      </ng-container>
    </div>
  </div>
</div>

在这个版本中，我在数组中为Header 部分添加了额外的对象。

【讨论】：

【解决方案2】：

TS 文件：

auditViews : any = [
{
  "id" : "log1",
  "name" : "Audit log 1",
  "description" : "Descrition of audit log 1",
  "status" : "active"
},
{
  "id" : "log2",
  "name" : "Audit log 2",
  "description" : "Descrition of audit log 2",
  "status" : "active"
},
{
  "id" : "log3",
  "name" : "Audit log 3",
  "description" : "Descrition of audit log 3",
  "status" : "active"
}];

headings: Array<string> = Object.keys(auditViews[0])
footerElement: Array<string> = [];

HTML 文件：

<div id='table'>
  <!-- table head -->
  <div id="thead">
   <div class="table-row">
    <ng-template *ngFor="let heading of headings">
     <div class="table-cell">{{ heading }}</div>
    </ng-template>
   </div>
  </div>
    <!-- table body -->
  <div id="tbody">
      <ng-template *ngFor="let row of auditViews">
       <div class="table-row">
         <ng-template *ngFor="let field of row">
          <div class="table-cell">{{ field }}</div>
         </ng-template>
       </div>
      </ng-template>
  </div>
  <!-- table foot -->
  <div id="tfoot">
   <div class="table-row">
      <ng-template *ngFor="let footerElement of footer">
       <div class="table-cell">{{ footerElement }}</div>
      </ng-template>
   </div>
  </div>
    <!-- table end -->
</div>

目前，如果有元素，我会为页脚元素分配一个空数组。您可以将它们分配给“footerElement”数组。

【讨论】：