4

パフォーマンスの問題があり、解決策が見つかりません。

コンテキスト: テーブルに大量のデータ (500 行、8 列) を表示する必要があります。このデータを表示するために、優れた機能を提供する Smart-table を使用することにしましたが、問題は、大量のデータがあり、データを表示する時間が非常に長いことです (5 ～ 9 秒、これはデバイスのパフォーマンスに依存します)。

重要なこと：すべてのデータを表示する必要があるため、ページネーション方法、制限フィルターは必要ありません。

したがって、このコードは機能しています:

    <ion-scroll class="scrollVertical" direction="xy" overflow-scroll="true" >
            <table st-table="tableaux" class="table table-striped">
                    <thead>
                        <tr>
                            <th ng-repeat="column in ColumnTable">{{column.Label}}</th>
                        </tr>
                        <tr>
                            <th ng-repeat="column in ColumnTable">
                                <input st-search="{{column.Id}}" placeholder="" class="input-sm form-control" type="search" ng-model="inputRempli"/>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="row in tableaux">
                            <td ng-repeat="column in ColumnTable" ng-init="colonne = column.Id">{{row[colonne]}}</td>
                        </tr>
                    </tbody>
                </table>
  </ion-scroll>

Ionic がディレクティブ ( collection-repeat ) を作成したことを読みました。これにより、アプリはアイテムの膨大なリストを ng-repeat よりもはるかに効率的に表示できます。だから私は自分のソリューションを collection-repeat で作り直そうとしましたが、うまくいきません...

コード コレクション - リピート ソリューション:

<ion-scroll class="scrollVertical">
        <table st-table="tableaux" class="table table-striped">
            <thead>
                <tr>
                    <th ng-repeat="column in ColumnTable">{{column.Label}}</th>
                </tr>
                <tr>
                    <th ng-repeat="column in ColumnTable">
                        <input st-search="{{column.Id}}" placeholder="" class="input-sm form-control" type="search" ng-model="inputRempli"/>
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr collection-repeat="row in tableaux"  item-width="200px" item-height="100px">
                    <td collection-repeat="column in ColumnTable" ng-init="colonne = column.Id" item-width="100px" item-height="100px">{{row[colonne]}}</td>
                </tr>
            </tbody>
        </table>
    </ion-scroll>

エラー: 最大呼び出しスタック サイズを超えました

質問: 大量のデータを持つスマート テーブルのパフォーマンスを向上させる angularjs またはイオン ソリューションはありますか? collection-repeat の何が問題になっていますか?

4

2 に答える 2

0

データをどのようにロードしていますか?

を実行している場合$scope.ColumnTable.push(newData);、これは適切な方法ではありません。

私がすることは：

  • 一時テーブルをロードするサービスを作成します: と呼びましょう myService.setTable()。

  • コントローラーにイベントを通知する: このサービスはイベントを送信します$rootScope.$broadCast("myService.setTable-refresh")

  • イベントをコントローラーにキャッチして、テーブルを更新します。$scope.$on('myService.setTable-refresh,function(){ $scope.myWorkingTable =myService.getTable();});

  • 動作するように HTML を更新しますmyWorkingTable

さらに、すでに作成されたコンテンツの再構築を防ぐためにng-repeat使用されるパフォーマンス最適化のために、一意のキーを定義する必要があります。track by

ここで説明を参照してください: http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm

于 2015-06-01T18:27:40.213 に答える
0

使用している Ionic のバージョンは何ですか? バージョン 1.0 ベータ 14 以降を使用している場合は、bind onceを使用します(Angular 1.3 のネイティブ)

こうなりたい。

<ion-scroll class="scrollVertical" direction="xy" overflow-scroll="true" >
        <table st-table="tableaux" class="table table-striped">
                <thead>
                    <tr>
                        <th ng-repeat="column in ::ColumnTable">{{::column.Label}}</th>
                    </tr>
                    <tr>
                        <th ng-repeat="column in ::ColumnTable">
                            <input st-search="{{::column.Id}}" placeholder="" class="input-sm form-control" type="search" ng-model="inputRempli"/>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="row in ::tableaux">
                        <td ng-repeat="column in ::ColumnTable" ng-init="colonne = column.Id">{{::row[colonne]}}</td>
                    </tr>
                </tbody>
            </table>
</ion-scroll>
于 2015-05-28T09:45:10.070 に答える