Question

我有一个表格，目前正在生成145行，这当然会导致某些浏览器/机器出现性能问题。我正在寻找一个angualar解决方案，一次只产生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>

打字稿的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
    }
  }

我是否可以将此ngFor限制为仅5行数据并将索引更改为仅读取x-x + 5或者我必须使用更多javascripty

Answer 1

所以我做了@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>

并像这样控制它

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

ngFor table一次拉5

1 个答案: