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.
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]);
});
Try adding this
in context:
this.firebaseService.updateListing(this.id, listing).then(function() {
this.router.navigate(['/listing/'+this.id]);
}, this); /* <-- here */
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.