Question

我知道已针对同一问题发布了许多问题，但在我的案例中没有一个解决方案。

在调用Web服务时，我得到了JSON响应。在这个JSON中，大约有2000多个对象，我需要在表中显示数据。我想在表中显示所有（2000+）记录，是的，我不能限制或分页，需要在一个页面上显示它（我知道它很愚蠢，但这是业务需求）。我不需要排序或搜索。

数据传输大约为2MB，请求大约在2-4秒左右完成。但是页面上的数据呈现大约需要10-15秒。

现在，我正在寻找的是加速重复绑定（如果可能）或者在我收到数据后立即显示数据并继续添加它直到显示所有行。

查看以下代码：

HTML

<table class="table table-bordered table-striped cf">
<thead style="color: #333;">
<tr>
<td>Asset Name</td>
<td>Date/ Time</td>
<td>Location</td>
<td>Ignition</td>
<td>Speed</td>
<td>Heading</td>
<td>Direction</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="cols in tableData">
<td>{{ cols.aN }}</td>
<td>{{ cols.dT }}</td>
<td>{{ cols.Lat }}, {{ cols.Lon }}</td>
<td>{{ cols.I }}</td>
<td>{{ cols.S }}</td>
<td>{{ cols.H }}</td>
<td>{{ cols.D }}</td>
</tr>
</tbody>
</table>

JS

var ignition_text = '';
var lat = '';
var lon = '';
for (var i = 0; i < data.length; i++) {
    if (data[i].ignition = 1) {
        ignition_text = "On";
    } else {
        ignition_text = "Off";
    }
    $scope.$apply(function() {
        $scope.tableData.push({
            aN: name,
            dT: data[i].eventUTCTime,
            Lat: data[i].latitudeDegrees,
            Lon: data[i].longitudeDegrees,
            I: ignition_text,
            S: data[i].speedMPH,
            H: data[i].longitudeDegrees,
            D: data[i].latitudeDegrees
        });
    });
}

提前致谢！

Answer 1

你可能根本不需要$scope.$apply。即使您需要它，也应该只在将所有数据推送到表格后使用它。否则，每个添加的条目将强制进行摘要循环。只需构建数组并将完成的数组分配给scope-variable。然后angular只会构建一次表。

根据变量name的性质，您也可以消除阵列构建，只使用您正在下载的数据。除了name之外，您还可以使用该数据。

Answer 2

这是一个具有相似数据大小但加载速度更快http://plnkr.co/edit/I4rN1ZMaR3e1mbcsJ9Ka的插件。如果您要快速插入，我可以使用您的数据并编辑您的代码，但从外观上您只需要主要分配到范围而不应用数据并添加轨道到ng-repeat。 SN：您可能希望在for循环中操作数据，然后对范围进行分配。

for (var i = 0; i < data.length; i++) {
    if (data[i].ignition = 1) {
        ignition_text = "On";
    } else {
        ignition_text = "Off";
    }
    }
    $scope.tableData=data;

JS

 $http.get("largeData.json").then(function(response) {
    vm.test = response.data;
  });

HTML

<tbody>
      <tr ng-repeat="(key, value) in main.test track by $index ">
        <td>{{ value.ask }}</td>
        <td>{{ value.bid }}</td>
        <td>{{ value.volume_btc }}, {{ value.volume_percent }}</td>
        <td>{{ value.last }}</td>
        <td>{{ value.timestamp }}</td>
      </tr>
    </tbody>

ng-repeat花费太多时间来呈现数据

2 个答案: