我想用一个属性来迭代表,但是在一行中有4个td,并且继续这样直到最后……
我想要这样:
<table>
<tr>
<td>
<mat-checkbox>1</mat-checkbox>
</td>
<td>
<mat-checkbox>2</mat-checkbox>
</td>
<td>
<mat-checkbox>3</mat-checkbox>
</td>
<td>
<mat-checkbox>4</mat-checkbox>
</td>
</tr>
<tr>
<td>
<mat-checkbox>5</mat-checkbox>
</td>
<td>
<mat-checkbox>6</mat-checkbox>
</td>
<td>
<mat-checkbox>7</mat-checkbox>
</td>
</tr>
</table>
我试过这样做,但在一个专栏中都是这样:
lista = [
{ value: "1" },
{ value: "2" },
{ value: "3" },
{ value: "4" },
{ value: "5" },
{ value: "6" },
{ value: "7" },
<table *ngFor="let list of lista">
<tr>
<td>
<mat-checkbox>{{ list.value }}</mat-checkbox>
</td>
</tr>
</table>
发布于 2019-05-10 00:53:39
您需要首先将数组分组为4
(块大小),然后在模板中简单地对其进行迭代。
在您的组件中:
const lista = [
{ value: "1" },
{ value: "2" },
{ value: "3" },
{ value: "4" },
{ value: "5" },
{ value: "6" },
{ value: "7" }
];
const chunkSize = 4;
// Group in chunks of 4 and take only truthy values
const groups = lista
.map((x, index) => {
return index % chunkSize === 0 ? lista.slice(index, index + chunkSize): null;
})
.filter(x => x);
在您的模板中:
<table >
<tr *ngFor="let item of groups">
<td *ngFor = "let innerItem of item">
<mat-checkbox>{{ innerItem.value }}</mat-checkbox>
</td>
</tr>
</table>
发布于 2019-05-10 00:53:06
您可以将2d数组用于您的表,如下所示:
lista = [
[
{value: '1'},
{value: '2'},
{value: '3'},
{value: '4'}
],
[
{value: '5'},
{value: '6'},
{value: '7'},
{value: '8'}
]
];
和HTML
<table >
<tr *ngFor="let row of lista">
<td *ngFor="let col of row">
<mat-checkbox>{{ col.value }}</mat-checkbox>
</td>
</tr>
</table>
https://stackoverflow.com/questions/56063991
复制相似问题