Angular 2 - ngFor虽然索引
问题描述:
我目前正在研究项目(对象)数组的角度应用程序。我想在它自己的列表项中显示数组中的每个对象,但是想要将列表的高度限制为9行,然后在它旁边的新列表上开始。所以如果数组有13个元素,array [0]到array [8]应该列在第一列中的第一列中,而array [9]到array [12]列在新列表中。 如何使* ngFor在index = 9处停止循环,并从另一个列表中开始循环?Angular 2 - ngFor虽然索引<x
这是我当前的代码的外观:
<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>
答
你可以这样做:
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;
}
模板:
这样的<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>
答
一种方法是使用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>
答
除了@ yurzui的回答,您可以使用角管
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>
这是一个伟大的东西!如此明显,但非常聪明! – ancasen