Angular 行模板中的多个 <tr>

Question

我知道与此类似的问题是alloverthesite，但我的问题与那些略有不同。

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

<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>

大多数解决方案建议使用属性选择器并在真正的

上使用 *ngFor。这在我的情况下不起作用，因为实例和行之间没有一对一的关系。另外，父组件不知道应该渲染多少个 ；这是由 决定的。

当然， 的简单实现会失败，因为它会将不受支持的元素添加到 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只能包含

元素，所以表格逻辑中断了。

我的直觉（正如许多提出类似问题的人的直觉）是在没有实际 元素（仅其内容）的情况下呈现 但我认为它可能不受支持，因为 css 模拟模式会中断。

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

【问题讨论】：

• 我不知道你的数据的形状，但你不能再次使用 *ngFor 吗？
• Tbody 也可以重复。一张桌子不受人数限制
• @charlietfl 我不知道！这正是我所需要的。谢谢！您能否将其添加为答案，以便我接受？

Answer 1

正如 cmets 中的用户 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>

等等

Answer 2

您可以使用二维数组：Array<Array<number>>，其中第一个维度是数据行的数量，第二个维度是要呈现的 <tr> 的数量。

例如：

<data-row *ngFor="let row of array2d" [rowQuantity]="row" ></data-row>

在你的数据行组件内部：

<tr *ngFor="let tr of rowQuantity"></tr>