angular - Angular 行模板中的多个

Question

我知道一个类似的问题是 all over the site ，但我的问题与那些略有不同。

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

<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 模拟模式会中断.

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

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>

等等。