AngularJS ng-options 选择选项后选择默认值导致：“TypeError：无法读取属性'[property]' of null”

Question

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

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

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

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

复制错误说明：

1. 在浏览器中打开控制台
2. 从选择列表中选择一个选项。
3. 从选择列表中选择默认（“选择一个选项”）选项。
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

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

Answer 1

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.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
}