JavaScript/ AngularJS：仅当我单击两次按钮时才会显示错误消息

Question

我有一个 angularJS 视图，允许用户上传 Excel 数据并将其导入 SQL 服务器表。

我添加了数据的客户端验证，但只有当我再次单击上传/导入按钮时才会显示错误消息。 我不确定我的代码中的哪个部分导致了这个问题。

是否可以寻求帮助以试图解决这个问题？ 我想我可能需要移动$scope.Message变量分配的 position 但在哪里？

我包括 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>

Answer 1

$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();
 }

JavaScript/ AngularJS：仅当我单击两次按钮时才会显示错误消息

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-05-21 09:39:09

JavaScript/ AngularJS：仅当我单击两次按钮时才会显示错误消息

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-05-21 09:39:09

解决方案1
1 已采纳 2020-05-21 09:39:09