angular - 在 Angular *ngFor 中使用偶数和奇数

Question

我有一个记录列表，我想使用表格和 ngFor 显示这些记录。为了避免使用分页，我想在每个表行中显示 2 条记录，如下所示:

如您所见，我想在表格的左侧列显示偶数记录，在右侧显示奇数记录。我尝试使用以下模板代码将这个想法实现到我的 Angular 应用程序中，但编译器提示它:

<div class="col-12">        
    <table class="table table-hover table-sm">
        <thead>
            <tr class="text-center">
                <th scope="col">Time</th>                       
                <th scope="col">User</th>
                <th scope="col">Hostname</th>
                <th><!-- SEPARATOR --></th>
                <th scope="col">Time</th>                       
                <th scope="col">User</th>
                <th scope="col">Hostname</th>
            </tr>
        </thead>
        <tbody>
            <ng-container *ngFor="let event of formModel.controls['events']?.controls; 
                let i = index; 
                let even = even"
                [formGroupName]="i">
                <ng-container *ngIf="even; else dataOnTheRight">
                    <tr> <!-- START THE ROW FOR EVEN RECORDS -->
                </ng-container>
                <ng-container #dataOnTheRight>
                    <td> <!-- ADD SEPARATOR CELL FOR ODD RECORDS --> </td>
                </ng-container>

                <td class="align-middle">
                    {{ event.get('time').value  }}
                </td>
                <td>{{ event.get('username') }}</td>
                <td>{{ event.get('hostname') }}</td>

                <ng-container *ngIf="!even">
                    </tr> <!-- CLOSE THE ROW FOR ODD RECORDS -->
                </ng-container>
            </ng-container>
        </tbody>
    </table>
</div>

这是编译器抛出的错误:

如果这不可能，我会复制表格，这样我有一个用于偶数记录，另一个用于奇数，但我想知道是否有一些模板“技巧”可以让我做类似上面的代码。

谢谢!

Answer 1

问题是，如果您收到偶数行最后一次关闭 </tr>标签永远不会被打印，所以它放了一个 </tbody>在<tr>之后.我想你可以使用 last

            <ng-container *ngFor="let event of formModel.controls['events']?.controls; let i = index; let even = even; last as isLast"
            [formGroupName]="i">
            <ng-container *ngIf="even; else dataOnTheRight">
                <tr> <!-- START THE ROW FOR EVEN RECORDS -->
            </ng-container>
            <ng-container #dataOnTheRight>
                <td> <!-- ADD SEPARATOR CELL FOR ODD RECORDS --> </td>
            </ng-container>

            <td class="align-middle">
                {{ event.get('time').value  }}
            </td>
            <td>{{ event.get('username') }}</td>
            <td>{{ event.get('hostname') }}</td>

            <ng-container *ngIf="!even || isLast">
                </tr> <!-- CLOSE THE ROW FOR ODD RECORDS -->
            </ng-container>
        </ng-container>