Question

我从文件中获取数据然后数据正在推送到array.array数据可以在控制台中查看，但该数据没有显示在html页面中。如果我使用任何按钮，那么我能够在html页面中看到该数据。

var app = angular.module('xlsxApp', []);
app.controller('xlsxCtrl', ['$scope', function($scope) {
  $scope.finaldata = [];
  $scope.UploadFiles = function(files) {
    var f = files[0];
    var reader = new FileReader();
    reader.readAsBinaryString(f);
    reader.onload = function(e) {
      var data = e.target.result;
      /*Converts the excel data in to object*/
      var workbook = XLSX.read(data, {
        type: 'binary'
      });
      /*Gets all the sheetnames of excel in to a variable*/
      var sheet_name_list = workbook.SheetNames;
      /*This is used for restricting the script to consider only first sheet of excel*/
      sheet_name_list.forEach(function(y) { /*Iterate through all sheets*/
        /*Convert the cell value to Json*/
        var exceljson = XLSX.utils.sheet_to_json(workbook.Sheets[y]);
        $scope.finaldata = exceljson;
        console.log("finaldata :: ", $scope.finaldata);
      });
    }
  }
  $scope.test = function() {
    console.log("finaldata :: ", $scope.finaldata);
  }

}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.7.7/xlsx.core.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xls/0.7.4-a/xls.core.min.js"></script>
</head>

<body ng-app="xlsxApp" ng-controller="xlsxCtrl">
  <div class="container">
    <div class="form-inline">
      <input type="file" class="form-control" name="file" id="excelfile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" onchange="angular.element(this).scope().UploadFiles(this.files)" />

    </div>
    <button ng-click="test()">preview</button>
    {{finaldata[0]}}
  </div>
</body>

Answer 1

你在控制台中得到的对象不是array.so，在html中绑定{{finaldata}} /如果你想要值{{finaldata [＆＃39; C＆＃39;]}}

Answer 2

reader.onload()在AngularJS环境之外进行评估。您应该$timeout服务以在下一个摘要周期中更新UI视图

$timeout(function(){ 
    $scope.finaldata = exceljson; 
}, 0)

Answer 3

使用$scope.apply()评估来自外部angular.js

的更改

按下按钮时看到结果的原因 - 您可能在按钮上ng-click隐含地运行$scope.apply()并应用已经位于范围内的更改。

数组数据显示在控制台中，但是当我在html中打印时，它没有在angularjs中显示空数组

3 个答案: