각도 2 - ngFor 색인 <x

Question

현재 항목 (객체)의 배열이있는 각도 응용 프로그램에서 작업하고 있습니다. 배열의 각 객체를 자체 목록 항목에 표시하려고하지만 목록 옆의 새 목록에서 시작하기 전에 목록의 높이를 9 행으로 제한하려고합니다. 따라서 배열에 13 개의 요소가있는 경우 배열 [0] - 배열 [8]은 첫 번째 열의 첫 번째 목록에 나열되어야하고 [9] - 배열 [12]는 새 목록에 나열되어야합니다. * ngFor를 index = 9에서 반복 재생을 중지하고 다른 목록에서 루프를 시작하려면 어떻게합니까?

<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> 

Answer 1

당신이 할 수있는 무엇인가 : 템플릿에서

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> 

Answer 2

한 가지 방법 Array.prototype.slice을 사용

이 내 현재 코드는 모습입니다 방법 :

@ yurzui의 대답에

<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> 

또한

Answer 3

Stackblitz Example, 당신은 각 파이프

Stackblitz Example

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>