Uncaught (in Versprechen): TypeError: Kann Eigenschaft 'Router' von undefined nicht lesen

Question

Ich versuche, eine Ressource mit Firebase-Dienst zu aktualisieren/zu bearbeiten, und nach Aktualisierung/Bearbeitung möchte ich es zurück zu der Auflistungskomponente senden.

Wenn ich den Follcode verwende, funktioniert es, aber ich möchte herausfinden, warum das Obige nicht funktioniert. Jede Hilfe wird geschätzt.

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

Die folg ist die Fehler, die ich mit dem ersten Ansatz erhalten:

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

Die folg sind meine Routen:

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} 

] 

Und der folg ist mein Code für 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'v Wir haben uns ähnliche Fragen angeschaut, aber ich war mir nicht sicher, ob dies ein Problem im Zusammenhang mit dem "Dies" war, bis zu den Antworten auf meine Frage.

Answer 1

Versuchen Hinzufügen this im Kontext:

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

Answer 2

Die this Parameter innerhalb des Callback ist nicht das gleiche wie außerhalb. So haben Sie grundsätzlich zwei Möglichkeiten:

1) einen Verweis auf this:

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

2) Mit dem Pfeil Funktionen (die den aktuellen this Kontext konservieren):

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