当前位置: 首页 > 知识库问答 >
问题:

角度6,可观察JSON属性顺序

周和志
2023-03-14

我在使用角度异步管道时遇到了一个问题。基于从后端接收的内容,使用ngFor的模板中显示的内容的顺序不同。

代码如下:

我已经创建了一个组件称为头组件,它收到一个可观察的头$作为输入参数。

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

在导入标头组件的父组件内部

头$=this.httpClient.get(this.configService.config.bay.***,选项)

实际上,我从后端接收的JSON的属性顺序如下:

  • nodo: "*****"
  • idSistSbar: "*****"
  • idSezione: "***"
  • sbarra: "**"
  • stato: "******"
  • 进展: "*"

但是头组件中显示的内容与我们从后端实际接收到的内容有非常不同的随机顺序。

如何以从后端接收的相同顺序显示header组件中的JSON属性?

非常感谢


共有1个答案

申昌勋
2023-03-14

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

 类似资料:
  • 导览 本小节主要介绍 Apache ShardingSphere 可观察性的相关功能 应用性能监控集成

  • 学习角得到服务和组件和可观察性。 我正在尝试在我的演示应用程序中实现暗模式。该控件由一个服务完成,该服务根据浏览器默认值(如果找到)设置暗主题。 它在应用程序组件中初始化,以便以后在应用程序中放置控制开关。 暗模式从布尔值开始工作,因此为true或false。据我所知,使用一个可观察对象是不够的,因为我希望多个订阅者都以两种方式绑定到订阅,每种方式在服务中切换这些可观察对象。到目前为止,我很肯定这

  • 我发现这个伟大的帖子创建和返回观察角2服务,现在我尝试做同样的事情,但得到这个错误: core.umd.js:2838异常:无法读取未定义的属性'Next' 这是我的服务: 在es6中编译,下面是package.json中的依赖项: 谢谢 好的,现在我尝试设置重放主题对象的宽度: 但是我得到了一个意想不到的标记 完整错误的图像:

  • 我有一个可观察的,可观察的是存储在本地存储器中的一组对象(视频)。我有这样的“功能”将新视频推送到阵列中:视频是一个接口 在其他组件中,我将其称为推送新对象(视频),如下所示: 但这行不通,我知道这是我的错。在observable之前,我使用了经典的常量和函数,工作得很好,现在我在observable方面遇到了麻烦。有人告诉我,我需要订阅一个管道,但我找不到任何地方如何做到这一点。对我来说,可见物

  • 我对可观察量很陌生。如何仅从一个简单的字符串创建可观察的?然后订阅它并在它发生变化时输出它。 这有意义吗? 我在谷歌搜索上一点运气都没有。可能是错误的关键字? 添加一些代码以更好地解释: 我想我在这里做错了什么?但不知道怎么问。我将不胜感激的任何解释。

  • 我对angular是个新手,开始学习angular 4。数据未与使用异步管道的组件上的指令绑定。请帮忙 用户服务使用HTTP请求从API获取数据: user.service.ts 在这里,我使用用户列表的可观察用户[]界面: user.component.ts 订阅可观察用户变量的异步管道模板: user.component.html