Angular & Xrm WebApi: Cannot assign result to class variable

I'm building a base Angular 8.2 webressource for Dynamics CRM, but I can't manage to assign a value to a class property.

The code is the following :

HTML

<div>
  Hello {{loggedInUserName}} from {{ title }}.<br/>
  <br/>
  The first retrieved user from WebApi was {{ firstUserFullName }}
</div>

and the controller :

import {
  Component
} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'XRM-Angular-Base-App';
  loggedInUserName: String;
  firstUserFullName: String;

  ngOnInit() {
    let context = Xrm.Utility.getGlobalContext();
    this.loggedInUserName = context.userSettings.userName;
    console.log("Logged in user: " + this.loggedInUserName)
    Xrm.WebApi.retrieveMultipleRecords("systemuser", "?$select=firstname,fullname&$filter=firstname eq 'Alexandre'").then(
      function success(result) {
        alert(result.entities[0].fullname);
        this.firstUserFullName = result.entities[0].fullname;
        alert(this.firstUserFullName);
      },
      function (error) {
        alert("Error: " + error.message);
      }
    );

  }
}

When debugging (with the .map files), code goes to the first alert ( alert(result.entities[0].fullname); ), show the correct result ("Alexandre Someone"), but don't do anything on the next instruction (this.firstUserFullName = result.entities[0].fullname;), and the second alert is never shown.

If you have to access this so you have to use arrow operation (=>) in success callback and in error callback like below

Xrm.WebApi.retrieveMultipleRecords("systemuser", "?$select=firstname,fullname&$filter=firstname eq 'Alexandre'").then(
  result => {
    alert(result.entities[0].fullname);
    this.firstUserFullName = result.entities[0].fullname;
    alert(this.firstUserFullName);
  },
  error => {
    alert("Error: " + error.message);
  }
);