Angular6、ObservableJSON属性顺序

Question

我在使用 Angular 异步管道时遇到问题。使用 ngFor 在模板中显示的内容与从后端收到的内容顺序不同的问题。

这是代码：

我创建了一个名为 header-component 的组件，它收到一个可观察的 headers$ 作为输入参数。

<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>

在导入 header-component

的 parent 组件中

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

实际上，我从后端收到的 JSON 具有以下顺序的属性：

诺多：“*****”
idSistSbar：“*****”
idSezione：“***”
斯巴拉：“**”
状态：“******”
渐进式：“*”

但是 header-component 中显示的随机顺序与我们从后端实际收到的随机顺序非常不同。

如何以从后端收到的相同顺序显示 header-component 中的 JSON 属性？

非常感谢

Answer 1

实际上问题与 keyValue 管道有关。删除它或更改订单功能已经解决了问题

Angular6、ObservableJSON属性顺序

Angular 6, Observable JSON properties order

angular

rxjs

observable

async-pipe