角4 - 表示されるテーブル行の数が制限されます

Question

私はループしているエントリのリストを持っています。それぞれのエントリは、テーブルに行を追加しています。私は約2000のエントリを持っているので、テーブルをレンダリングするのに1秒かかる。私はどのようにこれを50か100に制限しますか？

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

私はまだ行が、私はちょうど唯一100を一度に表示したいそこになりたいので、この質問はthis oneは異なっています。

Answer 1

pipe〜フィルタを指定すると、特定の文字で始まる項目が作成されることをお勧めします。

はこのようなものになることができます：nameFilterとlimitが変数であることを

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

注：だから

@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); 
    }); 
    } 
} 

、テンプレートでは、あなたはSlicePipeとstartsWithパイプを兼ね備えています。

DEMO