[英]Using even and odd with Angular *ngFor
I have a list of records which I want to display using a table and ngFor
. 我有一个要使用表和
ngFor
显示的记录列表。 To avoid using pagination, I'd like to show 2 records per table row, something like this: 为了避免使用分页,我想在每个表行中显示2条记录,如下所示:
As you can see, I'd like to show the even records on the left columns of the table and the odd records on the right side. 如您所见,我想在表格的左列显示偶数记录,在右侧显示奇数记录。 I tried to implement this idea into my Angular application using the following template code, but the compiler complains it:
我试图使用以下模板代码将这种想法实现到我的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>
This is the error the compiler throws: 这是编译器抛出的错误:
If this is not possible, I'll duplicate the table so I have one for the even records and another one for the odd, but I was wondering if there are some templating 'tricks' that allow me to do something like the code above. 如果无法做到这一点,我将复制该表,以便为偶数记录创建一个表,为奇数记录创建另一个表,但是我想知道是否存在一些模板化的“技巧”使我能够执行上述代码。
Thanks! 谢谢!
What does the compiler complain about? 编译器抱怨什么?
Instead of even
use i % 2 === 0
(and i % 2 !== 0
) and you should be fine. 而不是
even
使用i % 2 === 0
(和i % 2 !== 0
),您应该没事。
The problem is that if you recieve an even number of rows the last closing </tr>
tag never gets printed so it puts a </tbody>
after an <tr>
. 问题是,如果您收到的行数是偶数,则最后一个关闭的
</tr>
标记将永远不会打印,因此它将</tbody>
放在<tr>
。 I think you could use 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>
Angular says that you do not have </tr>
tag in your row, so you have parsing error. Angular说您的行中没有
</tr>
标记,因此存在解析错误。 It means that Angular starts to draw your row, however, *ngIf="!even"
does not allow to insert </tr>
tag at the current row. 这意味着Angular开始绘制您的行,但是,
*ngIf="!even"
不允许在当前行插入</tr>
标记。 So you have the following HTML: 因此,您具有以下HTML:
<tr> <td>1<td> ... <!-- this row is not even, so you do not have </tr> tag
and you get your error-->
What you can do is just show even rows and insert items from the odd row into even row: 您可以做的只是显示偶数行,并将奇数行中的项目插入偶数行:
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.