在 Angular 中调用方法时，当前日期变为未定义

Posted 2023-05-09

【中文标题】在 Angular 中调用方法时，当前日期变为未定义

【英文标题】：Curret Date becomes undefined when a method is called in Angular

【发布时间】：2017-09-20 04:13:17

【问题描述】：

我通过设置最小和最大日期在我的页面中显示当前日期，其中我将最大日期设置为当前日期。加载页面时，它显示当前日期，但是当我按下按钮时调用一个函数，日期变得未定义。我不知道它为什么会发生，但是当我使用日期选择器选择一个日期并单击按钮时它工作正常，谁能告诉我为什么在调用函数时显示的默认日期变得未定义。

html：

<ion-content class="p-l-10 p-r-10 had-header form_slide_page">      
<form ng-submit="vm.addExpense()">
   <div class="list">
      <label class="item item-input InputFormFull">
        <span class="input-label">'date_message' | translate</span>
        <input type="date" placeholder="Date" ng-model="vm.expense.date" min="1980-01-01" max="vm.today | date:'yyyy-MM-dd'">
      </label>

      <label class="item item-input InputFormFull" ng-click="vm.gotoNewCategory()">
         <span class="input-label">'expensename_message' | translate</span>
         <input placeholder="'expensename_message' | translate" 
          ng-model="vm.expense.category" ng-readonly="true" ng-change="vm.fillStarted()">
       </label>

      <label class="item item-input InputFormFull">
        <span class="input-label">'amount_message' | translate</span>
        <input type="number" step=".01" placeholder="'amount_message' | translate" ng-model="vm.expense.amount_out" ng-change="vm.fillStarted()" 
          next-focus id="field1" ng-focus="vm.scrollMe('field1')"
         field-to-validate="yes" field-value="vm.expense.amount_out" field-validation-type="num" field-name="Amount">
      </label>

      <button class="trans-but button" type="submit">'save_message' | translate</button>
   </div>
</form>

脚本：

function activate () 
  vm.expense = ;
  /*vm.expense.date = new Date();*/
  vm.expense.user_id = window.localStorage['user_id'];
  $log.log('vm.expense', vm.expense);
  $log.log('expense details', $stateParams.expenseDetails);
  vm.expense.category = $stateParams.expenseDetails.category;
  vm.expense.amount_out = $stateParams.expenseDetails.amount_out;
  vm.expense.date = $stateParams.expenseDetails.date;
  vm.items = []; // fix me (if needed modify to categories instead of item)
  screen.orientation.lock('portrait');
  DB.getByColVal('category', 'category', ['Expense']).then(function (result) 
    for (var i = 0; i < result.rows.length; i++) 
      vm.items.push(display: result.rows.item(i).name);
    
    $log.log('vm.items: ', vm.items);
  , CommonService.handleError);
  /*$scope.today = new Date().toISOString();*/
  //$scope.today = new Date().toISOString().split('T')[0];
  vm.today = new Date();
  var dd = vm.today.getDate();
  var mm = vm.today.getMonth() + 1;
  var yyyy = vm.today.getFullYear();
  if (dd < 10) 
    dd = '0' + dd;
  
  if (mm < 10) 
    mm = '0' + mm;
  
  vm.today = yyyy + '-' + mm + '-' + dd;
  $log.log('CalendarDate', vm.today);
  localforage.setItem('categoryEnteredDetails', '');

使默认日期未定义的函数：

function gotoNewCategory () 
  vm.catgory = ;
  $log.log('Expense Details ', vm.expense);
  vm.catgory.userdetail = vm.expense; //fix me
  vm.catgory.userentry = vm.expense;
  vm.catgory.userdetail.type = 'Expense';
  vm.catgory.catergorytype = 'Expense';
  localforage.setItem('categoryType', 'Expense');
  $state.go('categoryType', CategoryDetails: vm.catgory);

LogCat：

Object user_id: "60", category: "", amount_out: 85, date: undefined

【问题讨论】：

你能分享一下jsfiddle吗？

【参考方案1】：

我想这是因为在您的gotoNewCategory() 中有$state.go('categoryType', CategoryDetails: vm.catgory)。

所以当你改变状态时，$stateParams 也在改变，所以vm.expense.amount_out = $stateParams.expenseDetails.amount_out 可能会重新赋值为 undefined，因为$stateParams 被改变了

我相信你可以尝试使用$state.go('categoryType', CategoryDetails: vm.catgory, expenseDetails: vm.expense)修复它