angularjs - ng-grid 列サイズの問題。そしてng-ifの問題

Question

ng-grid のグリッド列幅に問題があります。私の問題は、列がどうなるか事前にわからないことです (それらは値と同時にサービス呼び出しから取得されます。私の Json オブジェクトには 2 つのプロパティがあります。列名の文字列の配列と次に、値の 2 次元配列です。現在、列は列ヘッダーに合わせてサイズ変更されていません。行データに合わせて列のサイズが変更されることは理解していますが、結果が返されない場合はどうなるでしょうか。それでは混乱します。私はそれを作ってみました。データを取得するまでグリッド オプションを設定する必要はありませんでしたが、未定義のエラーが発生しました. 別の投稿で、その解決策が div タグで ng-if を使用して、必要になるまでグリッドが読み込まれないようにすることを見ました. if ステートメントが満たされる前にグリッドがまだロードしようとしたため、それはどちらも機能しませんでした. 以下は私のコードです. 何かご意見は？また、私の ng-if は次のようでした: ng-if="contentAvailable". スクリーンショットも追加。私の期待は、水平スクロールバーが表示されることです。

    app.controller('mainController',function($scope,dataFactory){
    $scope.contentAvailable = false;
    $scope.gridOptions = {
        columnDefs: 'columns',
        showGroupPanel: true
    };

    $scope.url = 'http://example.com';

        if (typeof String.prototype.startsWith != 'function') {
            String.prototype.startsWith = function (str) {
                return this.indexOf(str) == 0;
            };
        }

    $scope.Fetch = function () {
        dataFactory.Fetch($scope.url,$scope.config).success(function (blah) {
            var result = $scope.transformJsonDataSet(blah);

        })
          .error(function (error) {
              $scope.result = error;
          });
    };

    $scope.transformJsonDataSet = function (ds) {
        var tmp = angular.fromJson(ds);
        var fieldNames = tmp.FieldNames;
        var fieldValues = tmp.FieldValues;

        var columns = [];

        for (var i = 1; i < fieldNames.length; i++) {
            if (fieldNames[i].startsWith('DECODE_') == false) {
                columns.push({ field: fieldNames[i], displayName: fieldNames[i], cellClass: 'headerStyle'});
            }
        }

        $scope.columns = columns;

        $scope.contentAvailable = true;
        return ds;
    };
});

app.factory('dataFactory', ['$http', function ($http) {
    var dataFactory = {};
    dataFactory.Fetch = function (url,config) {
        return $http.get(url,config);
    };

    return dataFactory;
}]);