为什么我不能在 function 中使用路由器 object 为我的 Angular 服务中的 then() CRUD 删除操作定义？

Question

I am working on an Angular project and I have the following problem\doubt trying to use a Router class to navigate to a specifc page from the inside of a service class. I will try to explain my problem in details.

Basically I have this service class:

@Injectable({
  providedIn: 'root'
})
export class PatientService {

 

  constructor(
              private firestore: AngularFirestore,
              private router: Router
             ) { }

    ........................................................................
    ........................................................................
    ........................................................................

  deletePatient(patientId) {
    console.log("deletePatient() START. patientId: " + patientId);
    this.firestore
        .collection("patients")
        .doc(patientId)
        .delete()
        .then(async function(docRef) {
          console.log("Patient successfully deleted!");
          //this.router.navigate(['/patients-list']);

        })
        .catch(function(error) {
          console.error("Error deleting document with ID: ", patientId);
          console.log("ERROR: ", error);

          // TODO: NAVIGATE ON THE USER DETAILS PASSING A PARAMETHER IN ORDER TO PRINT AN ERROR MESSAGE
        });

        this.router.navigate(['/patients-list']);
    
  }
}

As you can see I am injecting private router: Router into the constructor and then I use it into the deletePatient() method.

So as it is it works fine and it redirect me to the page specified by the patients-list route but this is not the correct behavior because I want to redirect to this page if and only if the patient was correctly deleted on my Firestore DB. So in theory this navigation should happen inside the function defined for the then() (afther that it print in the console the message "Patient successfully deleted.").

The problem is that doing in this way:

  deletePatient(patientId) {
    console.log("deletePatient() START. patientId: " + patientId);
    this.firestore
        .collection("patients")
        .doc(patientId)
        .delete()
        .then(async function(docRef) {
          console.log("Patient successfully deleted!");
          this.router.navigate(['/patients-list']);

        })
        .catch(function(error) {
          console.error("Error deleting document with ID: ", patientId);
          console.log("ERROR: ", error);

          // TODO: NAVIGATE ON THE USER DETAILS PASSING A PARAMETHER IN ORDER TO PRINT AN ERROR MESSAGE
        });

        //this.router.navigate(['/patients-list']);
    
  }

It doesn't redirect me and I obtain the following error message into the Chrome console:

ERROR:  TypeError: Cannot read property 'router' of undefined
    at patient.service.ts:104
    at Generator.next (<anonymous>)
    at tslib.es6.js:74
    at new ZoneAwarePromise (zone-evergreen.js:960)
    at __awaiter (tslib.es6.js:70)
    at patient.service.ts:102
    at ZoneDelegate.invoke (zone-evergreen.js:364)
    at Object.onInvoke (core.js:27504)
    at ZoneDelegate.invoke (zone-evergreen.js:363)
    at Zone.run (zone-evergreen.js:123)

Why from the inside of the function defined for the then() case the rotuter object is not avaible. Looking on the private router: Router injetion of my service constructor in this case the IDE say to me:

Property 'router' is declared but its value is never read.ts(6138)

So it seems that someway from the inside of this function the this.router property is not accessible.

Why? What am I missing? How can I fix this problem in order to obtain the correct behavior? (I want to navigate to my /patients-list route in case of a correct patient delete action (the then()) or to an error page in case there are problem deleting the patient (the catch())

Answer 1

When you use an inline function, this refers to the function call context instead of your class instance.

Replace this:

.then(async function(docRef) {
          console.log("Patient successfully deleted!");
          this.router.navigate(['/patients-list']);

 })
.catch(function(error) {

With an arrow function:

.then((docRef) => {
          console.log("Patient successfully deleted!");
          this.router.navigate(['/patients-list']);

})
.catch((error) => {