在 Angular *ngFor 中使用偶数和奇数答案

【问题标题】：Using even and odd with Angular *ngFor在 Angular *ngFor 中使用偶数和奇数
【发布时间】：2020-01-18 05:37:36
【问题描述】：

我有一个要使用表格和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>

这是编译器抛出的错误：

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

谢谢！

【问题讨论】：

您收到错误，因为它没有找到起始 tr 标记。但是你已经关闭了它。

标签： angular

【解决方案1】：

Angular 说你的行中没有</tr> 标签，所以你有解析错误。这意味着 Angular 开始绘制您的行，但是，*ngIf="!even" 不允许在当前行插入 </tr> 标记。所以你有以下 HTML：

<tr> <td>1<td> ... <!-- this row is not even, so you do not have </tr> tag
                        and you get your error-->

您可以做的只是显示偶数行并将奇数行中的项目插入偶数行：

<ng-container 
    *ngFor="let event of formModel.controls['events']?.controls; 
    let i = index; 
    let even = even"
    [formGroupName]="i">
    <ng-container *ngIf="even;">
       <tr>
            <td>{{item}}</td> 
            <td> <!-- ADD SEPARATOR CELL FOR ODD RECORDS --> </td>
            <ng-container *ngFor="let item of formModel.controls['events']?.controls[ i + 1]" >
                <td>{{ item }}</td>
            </ng-container>
       </tr>
    </ng-container>
</ng-container>

【讨论】：

【解决方案2】：

编译器抱怨什么？

使用i % 2 === 0（和i % 2 !== 0）代替even，应该没问题。

【讨论】：

【解决方案3】：

问题是，如果您收到偶数行，则最后一个关闭的</tr> 标记永远不会被打印，因此它会在<tr> 之后放置一个</tbody>。我认为你可以使用 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>

【讨论】：