Angular 行模板中的多个 <tr>

Question

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

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

<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 只能包含元素，所以 table 逻辑中断。

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

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

Answer 1

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

例如：

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

在你的数据行组件中：

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

Answer 2

正如用户 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) 基础上进行 even/odd 样式设置，这对我来说很有意义。

行生成器的模板只是另一个 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>

等等

Angular 行模板中的多个 <tr>

Multiple <tr> in an Angular row template

angular2-template

angular