角6，可观测的JSON性质阶

Question

我面临一个使用角异步管道的问题。使用ngFor在模板中显示的内容并不是按照BackEnd收到的内容排列顺序的问题。

以下是代码：

我已经创建了一个名为header组件的组件，它接收一个可观察的头$作为输入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>

​

在导入标头组件的父组件中。

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

实际上，我从backEnd收到的JSON有其属性，顺序如下：

• nodo：“*”
• idSistSbar：“*”
• idSezione：“*”
• sbarra："**“

H 111stato：”*“

• *”H 214F 215

但是，头分量中显示的内容与我们实际从BackEnd得到的内容有着非常不同的随机顺序。

如何以与BackEnd相同的顺序显示header组件中的JSON属性？

非常感谢

Answer 1

实际上，这个问题与keyValue管道有关。删除它或更改order函数已经解决了这个问题。