Angular 如何显示复杂数据或更改ngFor中第一个和最后一个元素的模板？

已经有人问过类似的问题，但我的略有不同。还是我没找到合适的

我使用Angular 10，需要显示父级的复杂数据和子级列表：

数据=[
{Name:'n1'，Items:[{i1:'0000'，i2:'000'}]}，
{
名称：‘n2’，
项目：[
{i1:'11'，i2:'1'}，
{i1:'2'，i2:'22222'}，
],
},
];

HTML:

名称
项目
I1
I2
{{d.Name}
{{item.i1}
{{item.i2}

明显的问题是，不同数据元素的项单元格的宽度可能不同

为了克服这个问题，我希望避免在“items”单元格内创建单独的表，而是使用“main”表的单元格。例如，类似以下内容：

{{d.Name}
{{item.i1}
{{item.i2}

不过，我需要以某种方式为每个第一项“隐藏”第一个“”，为最后一项“隐藏”

当我写下这个问题并向自己解释得很好（希望如此）时，我相信通过使用这个想法修改第一个和最后一个记录“”中的“html”，我可以实现这个目标：

{{d.Name}
{{item.i1}
{{item.i2}

但这段代码给了我一个错误：

意外结束标记“tr”

请告知，如何以这种方式显示复杂数据？或者如何在“ng容器”中正确隐藏一些标签

---

谢谢

我相信下面就是你想要实现的目标

名称
项目
I1
I2
{{d.Name}
{{item.i1}
{{item.i2}

注意行

[attr.rowspan]=“d.Items.length”

。这样可以确保表格正确对齐

---

下面是第一个和最后一个元素的一个

，你可以像这样使用ngFor获得真值和假值

*ngFor=“让数据进入；让第一个=第一个；让最后一个=最后一个；”

。angular公开了以下变量<代码>索引，

第一个

，

最后一个

，

偶数

，

奇数

。是的，这很有意义。应该是简单易读的。谢谢！