ngForテーブルを一度に5つずつ取り出します

Question

私は現在、145行を生成するテーブルを持っていますが、これはもちろん特定のブラウザ/マシンでのパフォーマンス上の問題につながります。私はデータを守りながら、一度に4行または5行だけを生成するためのアンギュラー・ソリューションを探しています。

現在のテーブルはtypescriptです

isScrolled: boolean = false; 
    scrollDown() { 
    //first pass just physically scroll down to table view 
    if (this.isScrolled == false) { 
     scrollDown(200, <HTMLFormElement>document.getElementById("content")); 
     this.isScrolled = true; 
    } else { 
     //second click dont scroll down, move index from 1 to 5, display another 5 rows to user 
    } 
    } 

のよう

<tr *ngFor="let point of model.points; let i = index;" [class.isSaved]="point.saved"> 
    <td style="text-align:center;">{{i+1}}</td> 
    <td><input type="number" minvalue='0' maxvalue='360' name="DAY {{i+1}}" [(ngModel)]="point.day" disabled></td> 
    <td><input type="text" name="TIME {{i+1}}" [(ngModel)]="point.time" [time] disabled></td> 
    <td><input type="number" [appFixedPrecision]="'3'" minvalue='0.0' maxvalue='359.999' name="AZ {{i+1}}" [(ngModel)]="point.az" disabled></td> 
    <td><input type="number" [appFixedPrecision]="'3'" minvalue='-5.000' maxvalue='95.000' name="EL {{i+1}}" [(ngModel)]="point.el" disabled></td> 
    <td><input type="number" [appFixedPrecision]="'3'" minvalue='0.0' maxvalue='359.999' name="POL {{i+1}}" [(ngModel)]="point.pol" disabled></td> 
</tr> 

psudoコードのように見える私は、データのわずか5行にこのngForを制限し、xのみを読み取るために、インデックスを変更することができるアム - x + 5か何かもっとjavascriptyに頼らなければならないでしょうか

Answer 1

私は何をしましたか？バグリーは、推奨とホルダのアレイを作成したので、

<tr *ngFor="let point of displayValues.points; let i = index;" [class.isSaved]="point.saved"> 
    <td style="text-align:center;">{{(i+1) + displaySet}}</td> 
    <td><input type="number" minvalue='0' maxvalue='360' name="DAY {{(i+1) + displaySet}}" [(ngModel)]="point.day" disabled></td> 
    <td><input type="text" name="TIME {{(i+1) + displaySet}}" [(ngModel)]="point.time" [time] disabled></td> 
    <td><input type="number" [appFixedPrecision]="'3'" minvalue='0.0' maxvalue='359.999' name="AZ {{(i+1) + displaySet}}" [(ngModel)]="point.az" disabled></td> 
    <td><input type="number" [appFixedPrecision]="'3'" minvalue='-5.000' maxvalue='95.000' name="EL {{(i+1) + displaySet}}" [(ngModel)]="point.el" disabled></td> 
    <td><input type="number" [appFixedPrecision]="'3'" minvalue='0.0' maxvalue='359.999' name="POL {{(i+1) + displaySet}}" [(ngModel)]="point.pol" disabled></td> 
</tr> 

ような時にXによって解析され、あなたが5つの項目を管理し、サブ変数を作成した場合、この

displaySet: number = 0; 
scrollDown() { 
    if (this.displaySet < 140) { //my max value 
    this.displaySet += 5; 
    scrollDown(200, <HTMLFormElement>document.getElementById("content")); 
    for (let i = 0; i < 5; i++) { 
     this.displayValues.points[i] = this.model.points[this.displaySet + i]; 
    } 
    }