AngularJS ng-options Auswahl des Standardwertes nach Auswahl der Option führt zu: "TypeError: Kann die Eigenschaft '[property]' von null nicht lesen.

Question

Ich habe ein select-Tag, das ng-options und ng-model verwendet. Wenn ich eine Option auswähle und dann die Standardoption erneut auswähle und das Formular abschicke, scheint der ausgewählte Wert zu verschwinden. Dies ist ein optionales Auswahlfeld. Daher muss ich prüfen können, ob beim Senden nichts ausgewählt ist.

Ich habe mehrere Fragen ähnlich wie diese gefunden, aber keiner mit diesem Problem genau:

• https://github.com/angular/angular.js/issues/11685 (Ich habe keine benutzerdefinierten select-Tag-Richtlinie)
• AngularJS ng-options removed default blank value after selecting an option (Ich verwende bereits die Format in der Antwort)
• Angularjs - TypeError: Cannot read property 'name' of undefined" when work with dropdown (ich bin schon ein Modell Eigenschaft verwendet, wie in der Antwort vorgeschlagen)
• Cannot read property $scope.dropdownfield of null in angularjs (erkläre ich meine Daten vorher)

Hier ist eine einfache Geige ich mein Problem gemacht darstellt: https://jsfiddle.net/tjadenad/tse4ans1/29/

Anweisungen für die Replikation Fehler:

1. Konsole öffnen in Browser
2. Wählen Sie eine Option aus der Auswahlliste.
3. Wählen Sie die Standardoption ("Wählen Sie eine Option") aus der Auswahlliste aus.
4. Drücken Sie den Absenden-Button und den Fehler in der Konsole

hier sehen, ist die 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> 

Hier ist die Steuerung:

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

}); 

Ich brauche ein Objekt zu erstellen nach dem Senden mit der ID der Option als eine der Eigenschaften. Wenn die ID null oder leer ist, ist das in Ordnung, aber ich kann keine Möglichkeit finden, zu überprüfen, ob es null ist. Ich habe versucht mit

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

, aber das wirft den gleichen Fehler beim Versuch, auf 'ID' zuzugreifen.

Ich habe auch versucht

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

die Eigenschaft des neuen Objekts zu setzen, wie so:

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

Daraus ergibt sich:

selectedOption exists 

durch den Fehler gefolgt:

TypeError: Cannot read property 'hasOwnProperty' of null 

Bitte lassen Sie mich wissen, wenn weitere Informationen erforderlich sind. Vielen Dank im Voraus für jede Hilfe!

Answer 1

vm.modelObject.selectedOption übergibt eine isDefined-Prüfung - weil sie definiert ist, aber keine Wertzuweisung. Wenn die Seite frisch ist, wird die ID-Eigenschaft auch die IsDefined-Prüfung übergeben. Die Funktion angular.isObject() ist hier nützlich. Oder Sie können nur das Objekt/die Eigenschaften betrachten und sehen, ob sie null sind oder zu falsch ausgewertet werden.

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

Hier ist eine Geige mit einiger Konsolenprotokollierung: https://jsfiddle.net/f3jym9zg/

Hier einige Beispiele an Variablen spähen, um zu bestimmen, ob sie existieren. Das Gleiche gilt für 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 
}