Angular 行模板中的多个 <tr>

Question

我知道了类似的问题，这是所有 在 该 网站，但我的问题是从那些稍有不同。

我想编写一个为行提供服务的组件，但每个实例可能会生成一行到多行，具体取决于提供的数据：

<tbody>
    <!-- intended usage -->
    <data-rows *ngFor="let row of dataRows" [row]="row">
    </data-rows>
</tbody>

需要创建：

<tbody>

    <!-- from first <data-rows> instance -->
    <tr><td> instance 1, row 1 </td></tr>

    <!-- from second <data-rows> instance -->
    <tr><td> instance 2, row 1 </td></tr>
    <tr><td> instance 2, row 2 </td></tr>
    <tr><td> instance 2, row 3 </td></tr>

    <!-- from third <data-rows> instance -->
    <tr><td> instance 3, row 1 </td></tr>

</tbody>

大多数解决方案建议使用属性选择器并在真正的 <tr> 上使用 *ngFor。这在我的情况下不起作用，因为实例和行之间没有一对一的关系。另外，父组件不知道应该渲染多少个<tr>；这是由 <data-rows> 决定的。

当然，一个简单的 <data-rows> 实现会失败，因为它会向 tbody 添加不受支持的元素：

<tbody>

    <data-rows>
        <!-- from first <data-rows> instance -->
        <tr><td> instance 1, row 1 </td></tr>
    </data-rows>

    <data-rows>
        <!-- from second <data-rows> instance -->
        <tr><td> instance 2, row 1 </td></tr>
        <tr><td> instance 2, row 2 </td></tr>
        <tr><td> instance 2, row 3 </td></tr>
    </data-rows>

    <data-rows>
        <!-- from third <data-rows> instance -->
        <tr><td> instance 3, row 1 </td></tr>
    </data-rows>

</tbody>

这是行不通的，因为 tbody 只能包含 <tr> 元素，所以表格逻辑中断了。

我的直觉（就像许多问类似问题的人一样）是在没有实际的 <data-rows> 元素（只有它的内容）的情况下渲染 <data-rows> 但我认为它可能不受支持，因为 css 模拟模式会中断.

在不破坏初始前提的情况下解决这个问题的好方法是什么？

Answer 1

正如用户 charlietfl 在评论中指出的，我可以使用多个 TBODY 标签（我从未想到过），所以在我的例子中我可以轻松生成：

<tbody data-rows class="instance-1">
    <tr><td> instance 1, row 1 </td></tr>
</tbody>

<tbody data-rows class="instance-2">
    <tr><td> instance 2, row 1 </td></tr>
    <tr><td> instance 2, row 2 </td></tr>
    <tr><td> instance 2, row 3 </td></tr>
</tbody>

<tbody data-rows class="instance-3">
    <tr><td> instance 3, row 1 </td></tr>
</tbody>

在我的组件中，选择器是tbody[data-rows]，我可以有一个像这样的父模板：

<table>
    <thead>
        <tr><th>Table header</th></tr>
    </thead>
    <tbody data-rows *ngFor="let row of data" [row]="row"></tbody>
</table>

此方法的另一个优点是允许在实例（tbody）基础上使用偶数/奇数样式，这在我的例子中是有意义的。

行生成器的模板只是另一个 ngIf/ngFor 驱动的模板（根据需要）：

<tr><td>This row will always be shown</td></tr>
<tr *ngIf="..."><td>This row, only if first expansion is needed</td></tr>
<tr *ngIf="..."><td>This row, only if second expansion is needed</td></tr>
<tr *ngFor="..."><td>More additional rows</td></tr>

ETC。