angular - Operador de flecha VS pasar el argumento en una función: ¿cuál es la diferencia?

//component.ts
¿Cuál es la diferencia entre poner i como operador de flecha o poner i dentro de una función.

this.service.getuser().subscribe(i => {
    this.myuserList = i;
});

// Como se muestra a continuación, en el siguiente código los datos no se muestran en la página HTML

this.service.getUserList().subscribe(function(i : any){
    this.myuserList = i;
});

// También poniendo el código HTML como referencia

//component.html 
<tr *ngFor = 'let p of myuserList'>
<td>{{p.username}}</td>
<td>{{p.address.suite}}</td>
</tr>

Respuesta #1

Mientras se usa function (sintaxis ES5) la palabra clave this se refiere a la definición de la función. Mientras se usa la función flecha => (sintaxis ES6) la palabra clave this se refiere a la función externa.

function fun1() {

   let someVar = 1; 

   someFunctionWithCallback(function() {
      // this keyword referes to function passed to callback
      // cannot access outside variables here
      console.log(someVar) // undefined
   });

   someFunctionWithCallback(() => {
      // this keyword referes to outside function
      console.log(someVar) // will be accessible e.g. 1
   });
}

Respuesta #2

Aparte de ser más conciso en cuanto al código.

Las funciones flecha no tienen el objeto arguments

Las funciones flecha no tienen su propio significado de this: si usas this en una función flecha es como usar this fuera de ella. Esta es una de las características más útiles. ¿Por qué? porque con las funciones regulares terminas haciendo

const that = this;
this.service.getUserList().subscribe(function(i : any){
    that.myuserList = i;   
});

Así que para responderte en comentarios en el código:

this.service.getuser().subscribe(
i => {
   this.myuserList = i;  // this is the same this above
});

this.service.getUserList().subscribe(function(i : any){
    this.myuserList = i;  // this is not the same this above this line. 
});

Más sobre esto aquí