已经问过类似的问题，但是我的稍有不同。还是我只是没有找到合适的？
我使用的是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演示
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句