Limit auf ngFor anwenden

Wer eine Reihe an Daten mit *ngFor ausliest und „on the fly“ die Daten bereits filtern möchte (z.B. um nur eine bestimmte Menge anzuzeigen), der kann die filter-Methode einsetzen:

Beispiel-Daten (sportsdata.ts):

export default [
    {
        id: 1,
        name: 'Fussball'
    },
    {
        id: 2,
        name: 'Beachvolleyball'
    },
    {
        id: 3,
        name: 'Eishockey'
    },
    {
        id: 4,
        name: 'Volleyball'
    },
]

Komponente:

import { Component, OnInit } from '@angular/core';
import Sportsdata from "sportsdata.ts";

@Component({
  selector: 'my-component',
  templateUrl: './sportsdata.component.html',
})
export class SportsdataComponent implements OnInit {
    sportsdata: {id: number, name: string}[]

    constructor() { }

    ngOnInit() {
        this.sportsdata = Sportsdata;
    }

    public getSportsdata(begin: number, end: number) {
        begin = begin - 1;
        end = end - 1;
        return this.sportsdata.filter((item, index) => index >= begin && index <= end )
    }
}

Template:

<div *ngFor="let sportdata of getSportsdata(1,2)">
    {{ sportdata.name }}
</div>
<hr>
<div *ngFor="let sportdata of getSportsdata(3,4)">
    {{ sportdata.name }}
</div>