Отображение таблицы на основе массива без использования элементов таблицы, но с использованием свойств отображения

Question

Привет! Я создал таблицу, используя свойства отображения, теперь у меня есть массив, и я хочу перебрать этот массив и вывести значение столбца и строк, вот мой код: - 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 file: =

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"
}];

Это stati c, почему-то мне нужно, чтобы заголовок столбца был id, name, description и статус и ниже этого значения.

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

Рабочий пример

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.

Answer 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".