使用 Angular 创建嵌套的可折叠表格

Question

我正在显示一个表格，其中包含特定团队在给定年份参加的所有活动。表格的每一行都给出了单个事件（种子、位置等）的一些一般统计数据。当我单击任何给定行时，我想展开一个嵌套表，其中显示该特定事件的所有游戏。

我遇到了一些格式问题。现在，当我展开新表时，它会以一种奇怪的方式重新格式化父表，并且所有嵌套表列仅延伸到父表的第一个。如何使它与父表的宽度相同？

Here is an example

这是格式更漂亮的表格的屏幕截图，以防 stackblitz 示例难以看到。

已折叠：

扩展：

Answer 1

您需要将嵌套表放在 tr 和 td 中，并使用 colspan="4"

查看更新后的示例：https://stackblitz.com/edit/angular-ivy-wnr2qn-nested-table

Answer 2

完整代码。只需将 ng-container 更改为 tr。

完整代码： https://stackblitz.com/edit/angular-ivy-kutwtd

直播示例：Here

图片示例