Angular application gets large numbers from the backend and they are displayed badly in an html table

Question

My application is built in angular 7 and has a service that requests data from the WebApi that has EntityFramewrok to return the information.

The problem is that the numeric fields that have more than 18 digits are arriving incorrectly (for example the number 23434343434345353453,35 shows it as 23434343434345353000) when the service receives them. I did tests and the EntityFramework loads the data well. Finally, when I insert the data from my angular application, they are inserting well with the 18 or 20 digits I need, this because the model is created with the big.js library.

Front-end: Angular Back-end: WebApi with ASP .NET MVC and EntityFramework

Component

import Big from 'big.js';

export class Parametro {
    NRO_CONVENIO: string;
    FEC_INICIO_NEGOCIACION: Date;
    FEC_FIN_NEGOCIACION: Date;
    VLR_CUPO_APROBADO: Big;
    VLR_CUPO_UTILIZADO: Big;
    VLR_CUPO_APROBADO_STORAGE: Big;
    VLR_CUPO_UTILIZADO_STORAGE: Big;
    ESTADO_DISPONIBLE: string;
    ISEDIT: boolean;
}



export class ParametrosNegociacionService {
  formData: Parametro;
  list: Observable<Parametro>;
  readonly rootURL = environment.baseUrl; 

  constructor(private http: HttpClient) { }

  postParametro(formData: Parametro) {
      return this.http.post(this.rootURL + '/ParametrosNegociacion', formData);
  }

  refreshList() {
      this.http.get<Observable<Parametro>>(this.rootURL + '/ParametrosNegociacion')
    .toPromise().then(res => {
        this.list = res as Observable<Parametro>;
        this.list.forEach(element => {
          //Here the large number arrives badly
          element.VLR_CUPO_APROBADO_STORAGE = element.VLR_CUPO_APROBADO; 
        });
    });
  }
...

}

View

<table id="dataTable" class="dataTable">
  <thead class="headerStyle">
     <tr>
       <th>Vlr Cupo Aprobado</th>
     </tr>
  </thead>
  <tbody>
    <tr class="rowStyle" *ngFor="let emp of service.list">
     <!--Here the large number showon badly -->
     <td>{{emp.VLR_CUPO_APROBADO }}</td>
    </tr>
  </tbody>
</table>

When the data is received in the http.get, the numerical values misplace the information.

How can I receive the information of the large numbers correctly when I make the http.get request of all the information.

I grab any comments or ideas you have to solve this problem

score 1 · Accepted Answer · answered Dec 14 '19 at 15:28

Try to change the type of VLR_CUPO_APROBAD to string, because your dont need this value to an arithmetic operation, but only for display.

The problem with Javascript is the manipulation of big numbers.

I had the same problem with PHP, and that was a good solution for me

Angular application gets large numbers from the backend and they are displayed badly in an html table

1 Answers1