Angular 6, Observable JSON properties order

Question

I am facing a problem using Angular Async Pipe. The problem that what is shown in template using ngFor isn't in the same order based on what recieved form the BackEnd.

here is the code :

I have created a component called header-component which recieved an observable headers$ as an input param.

<div class="container-example" *ngIf="headers$ | async as headers; else loader">
  <mat-grid-list #grid cols="5" rowHeight="50px" *ngIf="headers['data']; else showError">
    <mat-grid-tile *ngFor="let prop of headers['data'] | keyvalue">
      <mat-form-field class="example-form-field width-spacing">
        <input autocomplete="off" matInput type="text" placeholder="{{('headers.' + sectionName + '.' + prop.key ) | translate}}" [value]="prop.value" disabled>
      </mat-form-field>
    </mat-grid-tile>
  </mat-grid-list>
  <!--show Error Message-->
  <ng-template #showError>
    <mat-error>{{'genericErrorMessage' | translate}}</mat-error>
  </ng-template>
  <!--show Error Message-->
</div>

inside the parent component which imports the header-component

headers$ = this.httpClient.get(this.configService.config.bay.****, option);

actually the JSON I am recieving from the backEnd has its properties in the following order :

• nodo: "*****"
• idSistSbar: "*****"
• idSezione: "***"
• sbarra: "**"
• stato: "******"
• progressivo: "*"

but what is shown in header-component has a very different randomic order than what we actually recieve from the BackEnd.

how can I show the JSON properties inside header-component in the same order recieved from the BackEnd ?

Thanks alot

Answer 1

actually the problem was related to the keyValue pipe. removing it or changing the order function already resolved the issue