Угловой 2 - ng для индекса ‹x

В настоящее время я работаю над угловым приложением с массивом элементов (объектов). Я хочу отображать каждый объект в массиве в отдельном элементе списка, но хочу ограничить высоту списка 9 строками, прежде чем он начнется в новом списке рядом с ним. Таким образом, если в массиве 13 элементов, от массива [0] до массива [8] следует указать в первом списке, в первом столбце, а от массива [9] до массива [12] - в новом списке. Как я могу заставить * ngFor прекратить цикл с индексом = 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>

typescript arrays angular ngfor
person ancasen    schedule 11.10.2017    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Один из способов сделать это - использовать метод 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

person yurzui    schedule 11.10.2017
comment
Это отличный материал! Такой очевидный, но такой умный! - person ancasen; 13.10.2017

arrow_upward
1
arrow_downward

В дополнение к ответу @yurzui вы можете использовать угловые трубы

Пример 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>
person omeralper    schedule 11.10.2017

arrow_upward
0
arrow_downward

Вы можете сделать что-то вроде:

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>
person Jota.Toledo    schedule 11.10.2017