Uncaught (in promise): TypeError: Cannot read property 'router' of undefined

Question

I am trying to update/edit a resource using firebase service and upon updating/editing I want to send it back to the listing component.

this.firebaseService.updateListing(this.id, listing).then(function() {

        this.router.navigate(['/listing/'+this.id]);

    });

When I use the foll code, it works, but I want to figure why the above does not work. Any help wld be appreciated.

this.firebaseService.updateListing(this.id, listing);
    this.router.navigate(['/listings']);

The foll is the error that I get with the first approach:

Uncaught (in promise): TypeError: Cannot read property 'router' of undefined

The foll are my routes:

const appRoutes: Routes = [
  {path:'', component:HomeComponent},
  {path: 'listings', component:ListingsComponent},
  {path: 'listing/:id', component:ListingComponent},
  {path: 'edit-listing/:id', component:EditListingComponent},
  {path: 'add-listing', component:AddListingComponent}

]

And the foll is my code for EditListingComponent

export class EditListingComponent implements OnInit {
  id:any;
  checklist:any; /*ngmodel binds the html fields to the properties in the component*/
  notes:any;
  constructor(private firebaseService: FirebaseService, private router:Router, private route:ActivatedRoute) { }

  ngOnInit() {
    // Get ID
    this.id = this.route.snapshot.params['id'];

    this.firebaseService.getListingDetails(this.id).subscribe(listing => {
      this.checklist = listing.checklist;
      this.notes = listing.notes;
      console.log(listing);     
    });
  }

  onEditSubmit(){
    let listing = {
      checklist: this.checklist,
      notes: this.notes

    }

    this.firebaseService.updateListing(this.id, listing).then(function() {

        this.router.navigate(['/listing/'+this.id]);

    });


    /*this.firebaseService.updateListing(this.id, listing);
    this.router.navigate(['/listings']); 
  }

}

I've looked at other questions similar to this, but I wasn't sure this was a problem related to the context of 'this' until the responses to my question.

Possible duplicate of [How to access the correct \`this\` context inside a callback?](https://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback) — eko, Jun 13 '17 at 12:38

score 4 · Answer 1 · answered Jun 13 '17 at 12:39

4

The this parameter inside the callback is not the same as outside. So you have basically two options:

1) add a reference to this:

let self = this;
this.firebaseService
    .updateListing(this.id, listing)
    .then(function() {
      self.router.navigate(['/listing/'+this.id]);
    });

2) Use arrow functions (which do preserve the current this context):

this.firebaseService
    .updateListing(this.id, listing)
    .then(() => {
      this.router.navigate(['/listing/'+this.id]);
    });

answered Jun 13 '17 at 12:39

Sirko

72,589
19
149
183

i have a back button in the html of the EditListingComponent. `Back` however, when i wish to go back to the particular listing with the foll code, it does not work... `Back`... the code of edit-listing.component.ts file is in my question... can you pls shed some insight why this may be.. i do have access to $key property of listing coz i see it my console.log – Nosail Jun 13 '17 at 13:31
@Nosail Sry, but I have no clue about that. – Sirko Jun 13 '17 at 13:40

score 1 · Answer 2 · answered Jun 13 '17 at 12:38

1

Try adding this in context:

this.firebaseService.updateListing(this.id, listing).then(function() {
    this.router.navigate(['/listing/'+this.id]);
}, this); /* <-- here */

answered Jun 13 '17 at 12:38

StudioTime

22,603
38
120
207

Uncaught (in promise): TypeError: Cannot read property 'router' of undefined

2 Answers2