基于数组显示 table 而不使用 table 元素但使用显示属性
Display a table based on an array without using table elements but using display properties
您好,我使用显示属性创建了一个 table,现在我有一个数组,我想遍历该数组并打印列和行的值,这是我的代码:-
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"
}];
这是静态的,不知何故我需要列 header 是 ID、名称、描述和状态,下面是值。
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 的格式方式,您可以避免双重 loop/iteration,这是此解决方案的优化版本。
优化版
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
部分的数组中添加了额外的对象。
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" 数组。
您好,我使用显示属性创建了一个 table,现在我有一个数组,我想遍历该数组并打印列和行的值,这是我的代码:- 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"
}];
这是静态的,不知何故我需要列 header 是 ID、名称、描述和状态,下面是值。
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 的格式方式,您可以避免双重 loop/iteration,这是此解决方案的优化版本。
优化版
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
部分的数组中添加了额外的对象。
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" 数组。