我有一个angularJS视图，该视图允许用户上传Excel数据并将其导入到SQL Server表中。
我添加了客户端对数据的验证，但是仅当我再次单击“上载/导入”按钮时，才会显示错误消息。我不确定代码中的哪个部分导致了此问题。
是否可以寻求帮助以尝试解决此问题？我想我可能需要移动$scope.Message变量的分配位置，但是在哪里？
我包括Javascript / angularjs代码和html视图。
AngularJS
//Parse Excel Data
$scope.ParseExcelDataAndSave = function () {
var file = $scope.SelectedFileForUpload;
if (file) {
var reader = new FileReader();
reader.onload = function (e) {
var filename = file.name;
// pre-process data
var binary = "";
var bytes = new Uint8Array(e.target.result);
var length = bytes.byteLength;
for (var i = 0; i < length; i++) {
binary += String.fromCharCode(bytes[i]);
}
// call 'xlsx' to read the file
var data = e.target.result;
var workbook = XLSX.read(binary, { type: 'binary', cellDates: true, cellStyles: true });
var sheetName = workbook.SheetNames[0];
var excelData = XLSX.utils.sheet_to_row_object_array(workbook.Sheets[sheetName]);
exceljsonObj = excelData;
var errors = [];
var rowCounter = 1;
for (var j = 0; j < exceljsonObj.length; j++) {
var xdata = exceljsonObj[j];
if (xdata['Meeting ID'] === undefined || xdata['MeetingID'] === undefined) {
errors.push('Row: ' + rowCounter + ' is missing the Meeting ID value.' +
' Please, verify that the data you are trying to upload meets the required criteria, ' +
'and then try to upload your file again.');
}
else if ((xdata['Legistar Id'].toUpperCase() === undefined || xdata['LegistarID'].toUpperCase() === undefined) &
(xdata['Agenda Item'].toUpperCase() === undefined ||xdata['AgendaItem'].toUpperCase() === undefined)) {
errors.push('Row: ' + rowCounter + ' Meeting has no Legistar ID and no Agenda Item. Please check data.');
}
rowCounter++;
}
if (errors.length > 0) {
$scope.Message = 'Please, verify that the file you are trying to upload is correctly formatted, \n ' +
'and that the data it contains, meets the expected criteria, then click the upload button again. \n Thank you!'
}
else {
// Save data
$scope.SaveData(excelData);
}
};
}
reader.onerror = function (ex) {
console.log(ex);
};
reader.readAsArrayBuffer(file);
};
HTML视图
<body ng-app="MyApp">
<div class="container py-4" ng-controller="MyController">
<div class="card">
<div class="card-header bg-primary text-white">
<h5>Cross Reference List</h5>
</div>
<div class="card-body">
@* Upload Button *@
<button style="margin-bottom:10px;" type="button" class="btn btn-primary rounded-0" data-toggle="modal" data-target="#myModal">
<i class="far fa-file-excel"></i> Upload Excel File
</button>
@* Modal Window *@
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Upload Cross-Reference List</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="input-group">
<div class="custom-file">
<input type="file" name="file" class="custom-file-input" onchange="angular.element(this).scope().UploadFile(this.files)" accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel" />
<label class="custom-file-label" for="inputGroupFile04">Choose file</label>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary" ng-disabled="!SelectedFileForUpload" ng-click="ParseExcelDataAndSave()" /><i class="fa fa-upload"></i> Upload
</div>
</div>
<span class="text-success">
{{Message}}
</span>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger rounded-0" data-dismiss="modal" ng-click="clearText()" />Close
</div>
</div>
</div>
</div>
@* Main Table *@
<table id="dataTable" class="table table-bordered table-striped" ;>
<thead>
<tr>
<th style="width: 90px;">Meeting ID</th>
<th style="width: 105px;">Agenda Item</th>
<th style="width: 85px;">Legistar ID</th>
<th>Title</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</body>
$ scope摘要问题。分配$ scope.Message之后，调用$ scope.apply（）
if (errors.length > 0) {
$scope.Message = 'Please, verify that the file you are trying to upload is correctly formatted, \n ' +
'and that the data it contains, meets the expected criteria, then click the upload button again. \n Thank you!'
$scope.$apply();
}