Angular 4 - Begrenzte Anzahl der angezeigten Tabellenzeilen

Question

Ich habe eine Liste von Einträgen, die ich durchschlinge, und für jeden Eintrag, den ich habe, füge ich eine Zeile zu einer Tabelle hinzu. Ich habe ungefähr 2000 Einträge, daher dauert es eine Sekunde, bis die Tabelle gerendert wird. Wie würde ich das auf 50 oder 100 beschränken?

<ng-container *ngFor="let entry of entries"> 
    <tr *ngIf="entry['name'].startsWith(filter)"> 
    <td>{{ entry.name }}</td> 
    </tr> 
</ng-container> 

Diese Frage unterscheidet sich von this one, weil ich immer noch die Zeilen will dabei sein, ich will nur nur 100 zu einer Zeit gezeigt werden.

Answer 1

Ich empfehle Ihnen, eine pipe zu Filter die Elemente nach Name, die mit einem bestimmten Zeichen beginnt.

Kann so etwas wie dieses:

@Pipe({ 
    name: 'startsWith' 
}) 
export class StartsWithPipe implements PipeTransform { 

    transform(items: any[], prop: string, term: string): any[] { 
    if (!Array.isArray(items) || !term) { 
     return items; 
    } 

    const strTerm: string = term.toLowerCase(); 

    return items.filter(item => { 
     return item[prop] && item[prop].toLowerCase().startsWith(strTerm); 
    }); 
    } 
} 

Also, in Vorlage, Sie kombinieren die startsWithRohr mit SlicePipe:

<div *ngFor="let item of items | startsWith: 'name': nameFilter | slice: 0: limit"> 
    {{item.name}} 
</div> 

Beachten Sie, dass nameFilter und limit Variablen sind.

DEMO