AngularJS ng选项在选择选项后选择默认值导致:“;TypeError:无法读取属性'[属性]'

AngularJS ng-options selecting default value after selecting option results in: "TypeError: Cannot read property '[property]' of null"

本文关键字：属性 选项 选择 读取 ng 默认值 AngularJS TypeError      更新时间：2023-09-26

我有一个使用ng选项和ng模型的select标记。当我选择一个选项，然后再次选择默认选项，然后提交表单时，所选的值似乎消失了。这是一个可选的选择字段，所以我需要能够在提交时检查是否没有选择任何内容。

我发现了几个类似的问题，但没有一个与这个确切的问题：

  • https://github.com/angular/angular.js/issues/11685（我没有自定义的select标记指令）
  • AngularJS ng选项在选择一个选项后删除了默认的空白值（我已经在使用答案中的格式）
  • Angularjs-TypeError:无法读取属性'；name'；未定义的"；当使用下拉列表时（我已经使用了答案中建议的模型属性）
  • 无法读取angularjs中null的属性$scope.dropdownfield（我事先声明了我的数据）

这是我制作的一把简单的小提琴，用来说明我的问题：https://jsfiddle.net/tjadenad/tse4ans1/29/

复制错误说明：

  1. 在浏览器中打开控制台
  2. 从选择列表中选择一个选项
  3. 从选择列表中选择默认选项（"Select an Option"）
  4. 按下提交按钮，在控制台中查看错误

这是html:

<div ng-app="app">
  <div ng-controller="TestController as ctrl">
        <form data-ng-submit="ctrl.submit()">
                <label for="test-select">
                    Label
                </label>
                <br />
                <select id="test-select" name="optionId"
                        data-ng-model="ctrl.modelObject.selectedOption" 
                        data-ng-options="option as option.description for option in ctrl.options track by option.id">
                    <option value="">Select an Option</option>
                </select>
        <br />
        <button type="submit">Submit</button>
    </form>
  </div>
</div>

这是控制器：

angular.module('app', []).controller('TestController', function() {
    var vm = this;
    vm.modelObject = { selectedOption: {id: '', description: ''} };
  vm.submit = submit;
  vm.options = [
    {
            id : 1,
      description: 'Option 1'
    },
    {
        id : 2,
      description: 'Option 2'
    }
  ];
  function submit() {
    var objectFromOptions = {
      optionId : vm.modelObject.selectedOption.id
    };
  }
});

我需要在提交后创建一个对象，并将选项的id作为属性之一。如果id为null或空，那没关系，但我找不到检查它是否为null的方法。我试过使用

angular.isDefined(vm.modelObject.selectedOption.id)

但在尝试访问"id"时会抛出相同的错误。

我也试过

vm.modelObject.selectedOption.hasOwnProperty('id')

设置新对象的属性，如下所示：

 function submit() {
    var objectFromOptions = { };
    if (vm.modelObject.hasOwnProperty('selectedOption')) {
        console.log('selectedOption exists');
    } else {
        console.log('selectedOption does not exist');
    }
    if (vm.modelObject.selectedOption.hasOwnProperty('id')) {
      console.log('id exists');
      objectFromOptions.optionId = vm.modelObject.selectedOption.id
    } else {
      console.log('id does not exist');
    }
  }

这导致：

selectedOption exists

然后是错误：

TypeError: Cannot read property 'hasOwnProperty' of null

如果需要更多信息，请告诉我。提前感谢您的帮助！

vm.modelObject.selectedOption将通过isDefined检查，因为它已定义，但没有赋值。此外，当页面是新的时，.id属性也将通过isDefined检查。angular.isObject（）函数在这里很有用。或者，您可以只查看对象/属性，看看它们是null还是计算为false。

   if (angular.isObject(vm.modelObject.selectedOption) && angular.isNumber(vm.modelObject.selectedOption.id)) {
      console.log('id exists');
      objectFromOptions.optionId = vm.modelObject.selectedOption.id
    } else {
      console.log('id does not exist');
    }

以下是一些控制台日志记录：https://jsfiddle.net/f3jym9zg/

下面是一些窥探变量以确定它们是否存在的例子。var.properties也是如此。

var oops=null;//assign a value of null to the variable oops
console.log(Boolean(oops));//false
console.log(oops!=null);//false
console.log(oops==undefined);//true (== has type conversion baked in)
console.log(oops===undefined);//false (=== does not type conversion, and the types must be the same to be equal. typeOf(undefined)!==typeOf(null))
console.log(angular.isDefined(oops));//true (defined, but assigned a value of null)
console.log(angular.isDefined(oopsy));//false
if (oops){ //evaluates to falsey
//never hit
} else {
//will be hit
}
相关文章：