假設我有一個欄位串列，每個欄位都有一個名稱和一個值。我想并排顯示每個名稱和值。每個欄位是一行，在 4 行之后，下一行應該換行到一個新列。所以這將是預期的結果：
Field 0 Field Value 0 Field 3 Field Value 3
Field 1 Field Value 1 Field 4 Field Value 4
Field 2 Field Value 2
Field Long Name Field Value 2
我能得到的最接近的是這樣的：
.grid-container {
display: inline-grid;
grid-auto-flow: column;
grid-template-rows: repeat(4, auto);
}
.cell {
display: grid;
grid-template-columns: auto auto;
}
<div class="grid-container">
<ng-container *ngFor="let field of Fields">
<div class="cell">
<span>field.name</span>
<span>field.value</span>
</div>
</ng-container>
</div>
這給了我這樣的東西：
Field 0 Field Value 0 Field 3 Field Value 3
Field 1 Field Value 1 Field 4 Field Value 4
Field 2 Field Value 2
Field Long Name Field Value 2
我知道這是因為我本質上是在創建單獨的網格，因此大小取決于欄位的每個名稱和值。我將如何獲得預期的結果？
uj5u.com熱心網友回復：
可能有一種更簡潔的方法，但我能夠通過將欄位串列拆分為一個二維陣列，每個陣列有 4 個值，然后為每個值創建一個單獨的表，從而實作這一點：
splitFields(fields: Field[], size) {
for (var chunks = [], i = 0; i < fields.length; i = size) {
var slice = fields.slice(i, i size);
chunks.push(slice);
}
return chunks;
}
HTML
<div class="grid-container">
<ng-container *ngFor="let fields of splitFields(Fields, 4)">
<table>
<tr *ngFor="let field of fields">
<td>{{ field.Name }}:</td>
<td>{{ field.Value }}</td>
</tr>
</table>
</ng-container>
</div>
CSS
.grid-container {
display: grid;
grid-auto-flow: column;
grid-column-gap: 5px;
}
table {
height: fit-content;
}
td {
padding: 5px;
}
結果
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/433934.html