Question

我是Angular 4应用程序的新手，并且已经了解了几周。环境是Node v6.11.0，NPM 3.10.10，Angular CLI 1.1.3，Typescript 2.2.2.0。

我显示直接从多个SQL Server表中检索的数据。我有一个140列和几千行的表。我最近编写了一个分页机制来获取1000行块的记录，MS WebAPI后端在5秒内在本地开发笔记本电脑上将这些数据提供给Angular应用程序。上周我们向数据库添加了大量行。以前只有20条记录，这些少量行没有性能问题。

此Angular应用程序使用服务使用http.get从SQL Server获取数据，并将其映射到SQL Server的json数组行。非常基本的东西，这一点没有问题。

显示1000个记录的大块是性能陷入困境的地方。这只是一个简单的静态显示，没有输入字段，不允许用户编辑显示的数据。

<table class="table table-striped">
    <thead>
        <tr>
            <th style="width:auto;" *ngFor="let column of columns">
                {{column}}
            </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of data">
            <td *ngFor="let column of columns">{{item[column]}}</td>
        </tr>
    </tbody>

    <tfoot>
    </tfoot>
</table>

有1000个记录块，IE 11扼流圈，能够抓住前1000条记录并在30秒左右后显示，但随后在下一个区块，它只显示一个空白屏幕，浏览器必须关闭。 Chrome可以更好地处理它，但是从收到数据到呈现数据之间仍有很大的延迟。

我发现IE11可以很好地处理这个特定表的50个记录块，但是在块大小在50到100之间，IE开始窒息。不幸的是，我们的客户想要使用IE而不是Chrome或Firefox。

我在StackOverflow上发现了一些类似的问题，但没有人解决这个问题。有人可以建议改善表现的方法吗？我不确定Angular在后台处理了多少，并且不需要任何绑定，因为这是静态的数据显示。 Angular是否默认具有绑定功能，可能导致延迟呈现可以某种方式关闭的数据？

我尝试实施“无跟踪”，但这并没有对性能产生任何影响。

感谢Angular退伍军人可以提供的任何建议，指出我正确的方向。

Answer 1

我不知道它是否会改善这么多......但是试着把[innerText]改为{{}}：

<table class="table table-striped">
    <thead>
        <tr>
            <th style="width:auto;" *ngFor="let column of columns" [innerText]="column">

            </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let item of data">
            <td *ngFor="let column of columns" [innerText]="item[column]"></td>
        </tr>
    </tbody>

    <tfoot>
    </tfoot>
</table>

还有一件事......你为什么不尝试paginate结果？

希望它可以帮到你

Angular 4应用程序

1 个答案: