Javascript Ng用于一次拉动5张桌子

我有一个表，到目前为止，它产生了145行，这当然会导致某些浏览器/机器上的一些性能问题。我正在寻找一个Angular解决方案，在保存数据的同时一次只生成4或5行

当前表看起来是这样的

<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>

{{i+1}}

typescript的psudo代码

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
    }
  }

isscrowled:boolean=false；
向下滚动（）{
//第一步只是物理上向下滚动到表视图
if（this.isscrowled==false）{
向下滚动（200，document.getElementById（“内容”）；
this.isscrowled=true；
}否则{
//第二次单击不要向下滚动，将索引从1移动到5，向用户显示另外5行
}
}

---

我是否能够将这个ngFor限制为仅5行数据，并将索引更改为仅读取x-x+5，或者我是否必须求助于更具javascripty性的方法，所以我按照@Z.Bagley的建议，创建了一个holder数组，并在类似的时间通过x进行解析

<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>

{（i+1）+displaySet}

然后像这样控制它

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];
    }
  }

displaySet:number=0；
向下滚动（）{
如果（this.displaySet<140）{//我的最大值
此.displaySet+=5；
向下滚动（200，document.getElementById（“内容”）；
for（设i=0；i<5；i++）{
this.displayValues.points[i]=this.model.points[this.displaySet+i]；
}
}

如果您创建了管理5项的子变量，并使用该子变量而不是主模型的ngFor work。这将起作用。编辑：我说是5项，但如果您一次将项目5推入该子变量，它将按预期工作，最终结果将显示所有145行。这很有意义一个为你做分页和延迟加载…启动看起来可以解决我的问题，但我有一个要求，不包括任何更多的包。我会在我的个人项目看看这个，它似乎真的很方便