Angular 10 ERROR TypeError: Cannot set property (var) of undefined

Question

I'm just now learning Angular 10 after a long time in AngularJS. I have a working version of this code which does not set the sorted variable, but I'm using this code to learn why I cannot set the variable sorted within my sortById function. The code below produces an error at line 29: ERROR TypeError: Cannot set property 'sorted' of undefined.

Obviously I do not understand the this. concept within the Angular framework.

 import { Component, OnInit } from '@angular/core';
 import { APPLICATIONS } from '../mock-applications';


 @Component({
   selector: 'app-applications',
   templateUrl: './applications.component.html',
   styleUrls: ['./applications.component.scss'],
 })

 export class ApplicationsComponent {

     data = APPLICATIONS;  
     sorted:number = 0;

     constructor() {};

     ngOnInit() {};

     // this function is triggered onClick 
     sortById(){
         // not sorted yet
         if(this.sorted === 0 || this.sorted === 2 ){
             this.data.sort(function (a, b) {
                  this.sorted = 1; // ERRROR HERE
                  console.log('asc');
                  return a.Id - b.Id;
             });
         // sorted 
         } else {
               this.data.sort(function (a, b) {
                    this.sorted = 2;
                    console.log('desc');
                    return b.Id - a.Id;
               });
         }
    
         console.log('sorted ' + this.sorted);
     }

}

'this' does not refer to what you think it does. You need to bind it if you want it to reference the ApplicationsComponent instance. — Roddy of the Frozen Peas
– Roddy of the Frozen Peas, Commented Nov 3, 2020 at 18:57

brooklynDadCore · Accepted Answer · 2020-11-03 19:11:14Z

3

         // not sorted yet
         if(this.sorted === 0 || this.sorted === 2 ){
             this.data.sort(function (a, b) { <--------- loss of scope
                  this.sorted = 1; // ERRROR HERE
                  console.log('asc');
                  return a.Id - b.Id;
             });
         // sorted 
         }

Declaring the function this way loses the enclosing scope, in this case this probably point to the function instance (tho it could be the window. fun!). If you use an arrow function you will bring in / be bound to the enclosing scope of the component.

 if(this.sorted === 0 || this.sorted === 2 ){
             this.data.sort((a, b) => { <--------- arrow function
                  this.sorted = 1; // ERRROR HERE
                  console.log('asc');
                  return a.Id - b.Id;
             });
         // sorted 
         }

Here is a nice primer for understanding scope better https://medium.com/javascript-in-plain-english/everything-you-wanted-to-know-about-javascript-scope-e991a8288bc

answered Nov 3, 2020 at 19:11

brooklynDadCore

1,6391 gold badge11 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

mediaguru Over a year ago

Thank you @BrooklynDadCore. I changed both of those to arrow functions and it worked properly. I've done a lot of arrow functions in React, but haven't worked in react for awhile and I'm obviously rusty!

Collectives™ on Stack Overflow

Angular 10 ERROR TypeError: Cannot set property (var) of undefined

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related