0

问题是这样的：我有一个大表格，基本上是一个文本框网格。实际的网格有 23 列和最多 400 行。这个网格是使用 ngFor 和 FormArray 动态生成的，因为记录的数量是任意的。

当您在文本框中输入内容时，文本更改之前会有很大的延迟。

有没有办法在不减少文本框的情况下加快速度？

这是一个 plunkr 来证明这一点：

    <div  class="row" *ngFor="let fg of slowFormArray.controls; let i = index">    
    <div class="col" ><input type="text" value="1"  (click)="$event.preventDefault()"  (keyup)="$event.preventDefault()" (keydown)="fastKeyDown($event)"  (keypress)="$event.preventDefault()" (input)="$event.preventDefault()" (change)="$event.preventDefault()"/></div>
    <div class="col" ><input type="text" value="1"  (click)="$event.preventDefault()"  (keyup)="$event.preventDefault()" (keydown)="fastKeyDown($event)"  (keypress)="$event.preventDefault()" (input)="$event.preventDefault()" (change)="$event.preventDefault()"/></div>
    <div class="col" ><input type="text" value="1"  (click)="$event.preventDefault()"  (keyup)="$event.preventDefault()" (keydown)="fastKeyDown($event)"  (keypress)="$event.preventDefault()" (input)="$event.preventDefault()" (change)="$event.preventDefault()"/></div>
    <div class="col" ><input type="text" value="1"  (click)="$event.preventDefault()"  (keyup)="$event.preventDefault()" (keydown)="fastKeyDown($event)"  (keypress)="$event.preventDefault()" (input)="$event.preventDefault()" (change)="$event.preventDefault()"/></div>
    <div class="col" ><input type="text" value="1"  (click)="$event.preventDefault()"  (keyup)="$event.preventDefault()" (keydown)="fastKeyDown($event)"  (keypress)="$event.preventDefault()" (input)="$event.preventDefault()" (change)="$event.preventDefault()"/></div>
    <div class="col" ><input type="text" value="1"  (click)="$event.preventDefault()"  (keyup)="$event.preventDefault()" (keydown)="fastKeyDown($event)"  (keypress)="$event.preventDefault()" (input)="$event.preventDefault()" (change)="$event.preventDefault()"/></div>
    <div class="col" ><input type="text" value="1"  (click)="$event.preventDefault()"  (keyup)="$event.preventDefault()" (keydown)="fastKeyDown($event)"  (keypress)="$event.preventDefault()" (input)="$event.preventDefault()" (change)="$event.preventDefault()"/></div>
    <div class="col" ><input type="text" value="1"  (click)="$event.preventDefault()"  (keyup)="$event.preventDefault()" (keydown)="fastKeyDown($event)"  (keypress)="$event.preventDefault()" (input)="$event.preventDefault()" (change)="$event.preventDefault()"/></div>
    <div class="col" ><input type="text" value="1"  (click)="$event.preventDefault()"  (keyup)="$event.preventDefault()" (keydown)="fastKeyDown($event)"  (keypress)="$event.preventDefault()" (input)="$event.preventDefault()" (change)="$event.preventDefault()"/></div>
    <div class="col" ><input type="text" value="1"  (click)="$event.preventDefault()"  (keyup)="$event.preventDefault()" (keydown)="fastKeyDown($event)"  (keypress)="$event.preventDefault()" (input)="$event.preventDefault()" (change)="$event.preventDefault()"/></div>
    <div class="col" ><input type="text" value="1"  (click)="$event.preventDefault()"  (keyup)="$event.preventDefault()" (keydown)="fastKeyDown($event)"  (keypress)="$event.preventDefault()" (input)="$event.preventDefault()" (change)="$event.preventDefault()"/></div>
    <div class="col" ><input type="text" value="1"  (click)="$event.preventDefault()"  (keyup)="$event.preventDefault()" (keydown)="fastKeyDown($event)"  (keypress)="$event.preventDefault()" (input)="$event.preventDefault()" (change)="$event.preventDefault()"/></div>
    <div class="col" ><input type="text" value="1"  (click)="$event.preventDefault()"  (keyup)="$event.preventDefault()" (keydown)="fastKeyDown($event)"  (keypress)="$event.preventDefault()" (input)="$event.preventDefault()" (change)="$event.preventDefault()"/></div>
    <div class="col" ><input type="text" value="1"  (click)="$event.preventDefault()"  (keyup)="$event.preventDefault()" (keydown)="fastKeyDown($event)"  (keypress)="$event.preventDefault()" (input)="$event.preventDefault()" (change)="$event.preventDefault()"/></div>
    <div class="col" ><input type="text" value="1"  (click)="$event.preventDefault()"  (keyup)="$event.preventDefault()" (keydown)="fastKeyDown($event)"  (keypress)="$event.preventDefault()" (input)="$event.preventDefault()" (change)="$event.preventDefault()"/></div>
    <div class="col" ><input type="text" value="1"  (click)="$event.preventDefault()"  (keyup)="$event.preventDefault()" (keydown)="fastKeyDown($event)"  (keypress)="$event.preventDefault()" (input)="$event.preventDefault()" (change)="$event.preventDefault()"/></div>
    <div class="col" ><input type="text" value="1"  (click)="$event.preventDefault()"  (keyup)="$event.preventDefault()" (keydown)="fastKeyDown($event)"  (keypress)="$event.preventDefault()" (input)="$event.preventDefault()" (change)="$event.preventDefault()"/></div>
    <div class="col" ><input type="text" value="1"  (click)="$event.preventDefault()"  (keyup)="$event.preventDefault()" (keydown)="fastKeyDown($event)"  (keypress)="$event.preventDefault()" (input)="$event.preventDefault()" (change)="$event.preventDefault()"/></div>
    <div class="col" ><input type="text" value="1"  (click)="$event.preventDefault()"  (keyup)="$event.preventDefault()" (keydown)="fastKeyDown($event)"  (keypress)="$event.preventDefault()" (input)="$event.preventDefault()" (change)="$event.preventDefault()"/></div>
</div>

http://plnkr.co/edit/seLHqs36lAZiykdGHbXP?p=preview

请务必使用 Chrome

确保分离视图窗口，以便一次可以看到许多文本框。

4

0 回答 0