Eigenschaft von undefined in AngualrJs kann nicht gesetzt werden

Question

Ich versuche, ein Kontrollkästchen für alle auswählen, die beim Klicken alle anderen Kontrollkästchen auf der Seite aktivieren/deaktivieren.

Mein HTML ist wie folgt:

<table class="table table-striped"> 
    <thead> 
     <tr class="table-header"> 
      <th ng-if="!newTestSessionCtrl.formData.battery.id"><input type="checkbox" ng-click="newTestSessionCtrl.selectAllTests()" ng-model=".allSelected" /></th> 
      <th>Test</th> 
      <th>Available Time</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr ng-repeat="row in newTestSessionCtrl.formData.battery.testDefinitions"> 
      <td ng-if="!newTestSessionCtrl.formData.battery.id"><input type="checkbox" ng-model="row.selected" ng-change="newTestSessionCtrl.optionToggled(); newTestSessionCtrl.validate()" /></td> 
      <td>{{row.name}}</td> 
      <td>{{(row.duration/60) | number:0}} minutes</td> 
     </tr> 
    </tbody> 
</table> 

Und das ist Code von meinem Controller:

class NewTestSessionController { 
     constructor($scope, $state, resources, NewTestSessionService, formats, AuthenticationService, toastr, momentTimezone, _) { 
      this.allSelected = false; 
     } 

     selectAllTests() { 
      let isSelected = true; 
      if (this.allSelected) { 
       isSelected = false; 
      } 
      angular.forEach(this.formData.battery.testDefinitions, function(v) { 
       v.checked = !isSelected; 
       this.allSelected = !isSelected; 
      }); 
     } 

     optionToggled() { 
      this.allSelected = true; 
      angular.forEach(this.formData.battery.testDefinitions, function(v) { 
       if(!v.checked) { 
       this.allSelected = false; 
      } 
     }); 
     } 
    } 

Das Problem ist mit allSelected Variable, wenn ich wählen Sie alle Kontrollkästchen klicken ich Fehler zu wobei undefined:

Versuche ich, falsch darauf zuzugreifen? Wenn ich den Debugger verwende, ist diese Variable nicht undefiniert, also bin ich mir nicht sicher, ob ich überhaupt an der richtigen Stelle bin? Dieses Problem sollte einfach zu implementieren sein, aber ich bin bei Angular noch nicht so gut. Sieht jemand das Problem?

Answer 1

Es ist das scope Problem mit this.

this Der Bereich ist innerhalb von Callback-Funktionen nicht verfügbar.

Assign this auf eine andere Variable und es verwenden, das im Inneren callbacks

diesem Code ersetzen Controller mit.

class NewTestSessionController { 
     constructor($scope, $state, resources, NewTestSessionService, formats, AuthenticationService, toastr, momentTimezone, _) { 
      this.allSelected = false; 
     } 

     selectAllTests() { 
      let _this = this; 
      let isSelected = true; 
      if (this.allSelected) { 
       isSelected = false; 
      } 
      angular.forEach(this.formData.battery.testDefinitions, function(v) { 
       v.checked = !isSelected; 
       _this.allSelected = !isSelected; 
      }); 
     } 

     optionToggled() { 
      let _this = this; 
      this.allSelected = true; 
      angular.forEach(this.formData.battery.testDefinitions, function(v) { 
       if(!v.checked) { 
       _this.allSelected = false; 
      } 
     }); 
     } 
    } 

Answer 2

Verwenden Arrow Function statt function() Erklärung.

-Code

selectAllTests() { 
    let isSelected = true; 
    if (this.allSelected) { 
     isSelected = false; 
    } 
    //arrow function to make current this available inside function 
    angular.forEach(this.formData.battery.testDefinitions, (v) => { 
     v.checked = !isSelected; 
     this.allSelected = !isSelected; 
    }); 
} 

optionToggled() { 
    this.allSelected = true; 
    //arrow function to make current this available inside function 
    angular.forEach(this.formData.battery.testDefinitions, (v) => { 
     if(!v.checked) { 
     this.allSelected = false; 
    } 
});