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

Question

我有一个使用 ng-options 和 ng-model 的 select 标签。当我 select 一个选项，然后再次 select 默认选项，然后提交表单时， selected 值似乎消失了。这是一个可选的 select 字段，因此我需要能够检查提交时是否没有 selected。

我发现了几个与此类似的问题，但是 none 确切的问题是：

https://github.com/angular/angular.js/issues/11685（我没有自定义 select 标签指令）
AngularJS ng-options removed default blank value after selecting an option（我已经在使用答案中的格式）
（我已经在使用答案中建议的模型属性）
Cannot read property $scope.dropdownfield of null in angularjs（我事先声明了我的数据）

这是我制作的一个简单的 fiddle 说明我的问题： https://jsfiddle.net/tjadenad/tse4ans1/29/

复制错误说明：

在浏览器中打开控制台
Select select 列表中的一个选项。
Select select 列表中的默认 ("Select an Option") 选项。
按下提交按钮并在控制台中查看错误

这里是 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

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

Answer 1

vm.modelObject.selectedOption 将通过 isDefined 检查——因为它已定义，但没有赋值。此外，当页面刷新时，.id 属性也将通过 isDefined 检查。 angular.isObject() 函数在这里很有用。或者您可以只查看 object/properties 并查看它们是否为空或计算结果为假。

   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');
    }

这是一个带有一些控制台日志的 fiddle：https://jsfiddle.net/f3jym9zg/

这里有一些查看变量以确定它们是否存在的示例。 var.property.

也是如此

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
}

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

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

javascript

typechecking

typeerror

angularjs

ng-options