Solución:
ChangeDetectorRef hará el truco.
Inyectarlo en el constructor.
constructor(
...
private cdr: ChangeDetectorRef,
...
) { }
editar getSale1 así para usar el cdr:
getSale1() {
this.customersService.getSale1()
.subscribe(
dataList => {
this.updateDataTable(dataList);
this.cdr.detectChanges();
}
)
}
Pero, ¿por qué tengo que usar ChangeDetectorRef?
Angular, por defecto, usa el ChangeDetectionStrategy.default que usan su lógica para “despertar” el componente para el render. Más especificaciones aquí: https://angular.io/api/core/ChangeDetectionStrategy
Hay ciertos casos en los que esto no es suficiente. Un caso podría ser un anidado muy grande. *ngFor.
Entonces, ¿por qué usar el cdr?
Como dije, hay algunos casos en los que Angular no despierta su renderizador. Dado que no todas las situaciones son iguales, es bastante imposible definir una respuesta absoluta a esto. Qué cdr.detectChanges() hace, es permitir que el método informe al renderizado de Angular para forzar el renderizado de su component.html. De esta manera, no importa cuál strategy estás usando (incluso si es .onPush) el componente se volverá a renderizar.
Pero ten cuidado. tienes que pensar en lo que estás haciendo antes de implementar esto. Por ejemplo, vuelva a renderizar el html dispara el ngOnChanges evento. Entonces podrías entrar en un bucle sin fin.
Más información sobre cdr: https://angular.io/api/core/ChangeDetectorRef
Espero que esto aclare algunas dudas.
Use una función trackby personalizada con una declaración de devolución única (por ejemplo, se supone que las ID son únicas, o puede rastrear la propiedad que cambia)
*ngFor="let data of mySaleModelArray2; trackBy: customTB"
customTB(item, index) {
return `${item.id}-${index}`;
}