我希望表格是这样的:
<table class="table table-bordered ">
<thead>
<tr id="first">
<th id="table-header">
<font color="white">No.</font>
</th>
<th id="table-header">
<font color="white">Responsible team </font>
</th>
<th id="table-header">
<font color="white">Task name</font>
</th>
<th id="table-header">
<font color="white">Task description </font>
</th>
</tr>
</thead>
<tbody>
<!-- 1 -->
<tr id="second">
<td rowspan="3" id="rowspan">1</td>
<td rowspan="3" id="rowspan">Team1</td>
<td>Description1</td>
<td id="text">Application1</td>
</tr>
<tr id="second">
<td>Description2</td>
<td id="text">Application2</td>
</tr>
<tr id="second">
<td>Description3</td>
<td id="text">Application3</td>
</tr>
<tr>
<tr id="third">
<td rowspan="3" id="rowspan">2</td>
<td rowspan="3" id="rowspan">Team2</td>
<td>Description1</td>
<td id="text">Application1</td>
</tr>
<tr id="third">
<td>Description2</td>
<td id="text">Application2</td>
</tr>
<tr id="third">
<td>Description3</td>
<td id="text">Application3</td>
</tr>
<tr>
</tbody>
</table>
但是我不想对其进行硬编码,我想使用*ngFor
这是我尝试过的方法:
<table class="table table-bordered ">
<thead>
<tr id="first">
<th id="table-header">
<font color="white">No.</font>
</th>
<th id="table-header">
<font color="white">Responsible team </font>
</th>
<th id="table-header">
<font color="white">Task name</font>
</th>
<th id="table-header">
<font color="white">Task description </font>
</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let i of finalL ; let index = index">
<tr id="second">
<td id="rowspan">{{index + 1 }}</td>
<ng-container *ngFor="let j of i">
<td id="rowspan">{{j}}</td>
</ng-container>
</tr>
</ng-container>
</tbody>
</table>
但是它不能正常工作(您可以在stackblitz
链接上看到区别)。如何修改代码以获得我想要的东西?谢谢!
答案 0 :(得分:1)
我可以这样处理数据:
在组件课程中:
finalL = [
["Team1", "Description1", "Application1"],
["Team1", "Description2", "Application2"],
["Team1", "Description3", "Application3"],
["Team2", "Description1", "Application1"],
["Team2", "Description2", "Application2"],
["Team2", "Description3", "Application3"],
];
data() {
// First find distinct teams and then filter information about him
return this.finalL.map(x => x[0])
.filter((v, i, a) => a.indexOf(v) === i)
.map(x => ({
name: x,
data: this.finalL.filter(y => y[0] === x)
}));
}
,然后在组件模板:
<table class="table table-bordered ">
<thead>
<tr id="first">
<th id="table-header">
<font color="white">No.</font>
</th>
<th id="table-header">
<font color="white">Responsible team </font>
</th>
<th id="table-header">
<font color="white">Task name</font>
</th>
<th id="table-header">
<font color="white">Task description </font>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let i of data(); let index = index">
<td>{{ index + 1 }}</td>
<td>{{ i.name }}</td>
<td>
<tr *ngFor="let j of i.data">
<td>{{ j[1] }}</td>
<td>{{ j[2] }}</td>
</tr>
</td>
</tr>
</tbody>
</table>