[英]Angular 2 - ngFor while index < x
I'm currently working on an angular app with an array of items (objects). 我目前正在开发一个带有一系列项目(对象)的角度应用程序。 I want to display each object in the array in its own list item, but want to limit the height of the list to 9 rows, before it starts on a new list next to it. 我想在它自己的列表项中显示数组中的每个对象,但是想要在它旁边的新列表上开始之前将列表的高度限制为9行。 So if the array has 13 elements, array[0] to array [8] should be listed in the first list, in the first column, while array [9] to array [12] should be listed in a new list. 因此,如果数组有13个元素,则array [0]到array [8]应该列在第一列中的第一列中,而array [9]到array [12]应该列在新列表中。 How can I make *ngFor stop looping at index = 9, and start looping from there on another list? 如何在index = 9处使* ngFor停止循环,并从另一个列表开始循环?
This is how my current code looks: 这是我当前代码的外观:
<div *ngIf="patients" class="col-sm-4" id="patientList">
<!--Patient 0 to 8 should go in this space-->
<table id="patientsTab">
<tr *ngFor="let patient of patients; let i = index;" class="patientRow" >
<td class="ptName"><button class="patientSelect" (click)="selectPatient(i)" >{{ patient.firstName }} {{ patient.lastName }}</button></td>
<td class="ptPersonnr">{{ patient.personnr }}</td>
</tr>
</table>
</div>
<div *ngIf="patients.length > 9" class="col-sm-4">
<!--Patient 9 to 13 should go in this space-->
</div>
<div *ngIf="patient" class="col-sm-4">
</div>
One way of doing this is using Array.prototype.slice
method: 一种方法是使用Array.prototype.slice
方法:
<div *ngIf="patients" class="col-sm-4" id="patientList">
<!--Patient 0 to 8 should go in this space-->
<table id="patientsTab">
<tr *ngFor="let patient of patients.slice(0, 8); let i = index;" class="patientRow" >
<td class="ptName"><button class="patientSelect" (click)="selectPatient(i)" >{{ patient.firstName }} {{ patient.lastName }}</button></td>
<td class="ptPersonnr">{{ patient.firstName }}</td>
</tr>
</table>
</div>
<div *ngIf="patients.length > 9" class="col-sm-4">
<div *ngFor="let patient of patients.slice(8, 13);">
{{ patient.firstName }}
</div>
</div>
You could do something like: 你可以这样做:
get slicedList(){
return this.sliceList(this.patients,9);
}
private sliceList(list: string[], factor: number): string[][] {
const result: string[][] = [];
const totalIterations = Math.max(Math.ceil(list.length / factor),1);
let iteration = 0;
while (totalIterations > iteration) {
const start = iteration * factor;
const end = Math.min((iteration + 1) * factor, list.length);
result.push(list.slice(start, end));
iteration++;
}
return result;
}
In template: 在模板中:
<ng-container *ngFor="let sublist of slicedList;index as listIndex">
// sublist is a list of size N, with N <= 9
List: {{i+1}}
<ng-container *ngFor="let patient of sublist; index as patientIndex">
{{patient | json}}
<span>Patient at index: {{(listIndex*9)+patientIndex}}</span>
</ng-container>
</ng-container>
In addition to @yurzui's answer, you may use angular pipes 除了@ yurzui的答案,你可以使用角管
Stackblitz Example Stackblitz示例
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'stopat'})
export class StopAtPipe implements PipeTransform {
transform(value: Array<any>, start:number, end:number) {
return value.slice(start,end);
}
}
<div class="container">
<div class="row">
<div *ngIf="patients" class="col-sm-4" id="patientList">
<!--Patient 0 to 8 should go in this space-->
<table id="patientsTab">
<tr *ngFor="let patient of patients | stopat:0:8; let i = index;" class="patientRow" >
<td class="ptName"><button class="patientSelect" (click)="selectPatient(i)" >{{ patient.firstName }} {{ patient.lastName }}</button></td>
<td class="ptPersonnr">{{ patient.firstName }}</td>
</tr>
</table>
</div>
<div *ngIf="patients.length > 9" class="col-sm-4">
<div *ngFor="let patient of patients | stopat:8:13;">
{{ patient.firstName }}
</div>
</div>
<div *ngIf="patient" class="col-sm-4">
</div>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.