我在使用 Angular Async Pipe 时遇到问题。根据从后端收到的内容，使用 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>在导入标头组件的父组件内
headers$ = this.httpClient.get(this.configService.config.bay.****, option);
实际上，我从后端收到的 JSON 的属性按以下顺序排列：
- 节点：“*****”
- idSistSbar：“*****”
- idSezione：“***”
- 斯巴拉：“**”
- 状态：“******”
- 进步：“*”
但是 header-component 中显示的随机顺序与我们从后端实际收到的随机顺序非常不同。
如何以从 BackEnd 收到的相同顺序显示 header-component 内的 JSON 属性？
非常感谢