Angular 2 - ngFor while index < x

Posted 2023-03-13

【中文标题】Angular 2 - ngFor while index < x

【英文标题】：

【发布时间】：2018-03-23 14:15:38

【问题描述】：

我目前正在开发一个带有一组项目（对象）的角度应用程序。我想将数组中的每个对象显示在其自己的列表项中，但希望将列表的高度限制为 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>

【参考方案1】：

一种方法是使用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>

Stackblitz Example

【讨论】：

这是很棒的东西！如此明显，却又如此聪明！

【参考方案2】：

除了@yurzui 的回答，你还可以使用角管

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>

【参考方案3】：

你可以这样做：

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>