已经有人问过类似的问题，但我的问题略有不同。还是我只是没找到对的人?
我使用的是Angular 10，需要显示父节点的复杂数据和子节点的列表:
data = [
{ Name: 'n1', Items: [{ i1: '0000', i2: '000' }] },
{
Name: 'n2',
Items: [
{ i1: '11', i2: '1' },
{ i1: '2', i2: '222222' },
],
},
];
HTML:
<table border=1>
<head>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Items</th>
</tr>
<tr>
<th>I1</th>
<th>I2</th>
</tr>
</thead>
<body>
<tr *ngFor="let d of data">
<td>{{ d.Name }}</td>
<td colspan="2">
<table border=1>
<tr *ngFor="let item of d.Items">
<td>{{ item.i1 }}</td>
<td>{{ item.i2 }}</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
明显的问题是不同数据元素的条目单元格宽度可能不同。
为了克服这个问题，我想避免在"items"单元格中创建一个单独的表，而是使用"main"表的单元格。例如，像这样:
<tbody>
<ng-container *ngFor="let d of data">
<tr>
<td attr.rowspan="{{ d.Items.length }}">{{ d.Name }}</td>
<ng-container *ngFor="let item of d.Items">
<tr>
<td>{{ item.i1 }}</td>
<td>{{ item.i2 }}</td>
</tr>
</ng-container>
</tr>
</ng-container>
</tbody>
虽然，我需要以某种方式"隐藏"第一个"为每个第一个项目和"为最后一个。
当我写了这个问题，并很好地解释了它(希望)给自己，我相信我可以通过使用这个想法，通过修改'html'里面的第一个和最后一个记录来实现这个目标:
<tbody>
<ng-container *ngFor="let d of data">
<tr>
<td attr.rowspan="{{ d.Items.length }}">{{ d.Name }}</td>
<ng-container *ngFor="let item of d.Items; let i=index">
<ng-container *ngIf=" i !== 0 " >
<tr>
</ng-container>
<td>{{ item.i1 }}</td>
<td>{{ item.i2 }}</td>
<ng-container *ngIf=" i !== d.Items.length-1 " >
</tr>
</ng-container>
</ng-container>
</tr>
</ng-container>
</tbody>
但是这个代码给了我一个错误:
意外结束标签"tr">
请告知，我如何以这种方式显示复杂的数据?或者如何在"ng-container"中正确地隐藏一些标签?
谢谢!
我相信下面就是你想要达到的目标
<table border=1>
<thead>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Items</th>
</tr>
<tr>
<th>I1</th>
<th>I2</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let d of data">
<ng-container *ngFor="let item of d.Items; let first=first">
<tr>
<td *ngIf='first' [attr.rowspan]='d.Items.length'>{{ d.Name }}</td>
<td>{{ item.i1 }}</td>
<td>{{ item.i2 }}</td>
</tr>
</ng-container>
</ng-container>
</tbody>
</table>
注意[attr.rowspan]='d.Items.length'这一行。这可以确保表正确对齐
下面是一个stackblitz演示