尝试在 AngularJS 中将 ng-csv 与来自 FireBase 的数据一起使用

Question

我正在尝试使用 ng-csv 来允许用户通过单击按钮来下载 .csv 文件。信息存储在 Firebase 中，我创建了一个函数，该函数将 Firebase 所需的信息作为数组返回。但是，我认为问题在于单击按钮时，文件在从 Firebase 中提取并加载信息之前下载，因此 .csv 文件始终为空。有没有解决的办法？这是我在 main.js 应用程序中的代码：

this.export = function() {
  var results = fireFactory.getResults() //code that returns the array of objects
  results.$loaded().then(function(array) {
    var test= [];
    test.push(array[0]);
    test.push(array[1]);
    return test;
  };
};

这是我的 HTML 文件中的代码：

<button class ="btn" ng-csv="main.export()" filename="test.csv">Export</button>

有没有办法延迟文件下载，直到信息被加载并从 main.export() 函数返回？

Answer 1

参考 angularjs Doc https://docs.angularjs.org/api/ng/service/$q中的 promises/deferred objects 的这个实现

Answer 2

我之前遇到过这个问题，我通过使用承诺请求填充返回值来解决它。尝试使导出功能如下：

this.export = function() {
  var results = fireFactory.getResults(); //code that returns the array of objects
  var csvData = results.$loaded().then(function(array) {
     var test= [];
     test.push(array[0]);
     test.push(array[1]);
     return test;
  };
  return csvData;
};

导出函数应该返回来自请求的数组。您还应该在 HTML 元素中添加lazy-load，如下所示：

<button class ="btn" ng-csv="main.export()" filename="test.csv" lazy-load="true">Export</button>

Answer 3

$scope.ExportCsv = async function() {
    const msg = await getdata();
    return msg;
}
var getdata = function abc(a, b) {
        return new Promise(resolve => {
                    $http.get( // use backend)
                        .success(function(data, status, headers, config) {
                            $scope.datacsv = [];
                            angular.forEach($scope.dt, function(value, key) {
                                $scope.datacsv.push({
                                    "a":value.a,
                                    "b":value.b});
                                });
                            })
                            setTimeout(() => {
                                resolve($scope.datacsv);
                            }, 2000);
                        });
                    }

<button type="button" ng-csv="ExportCsv()" filename="ExportCsv.csv" csv-header="['a','b']" charset="utf-8">CSV</button>