如何禁用自动键值排序Angular 6答案

【问题标题】：How to disable automatic keyvalue sorting Angular 6如何禁用自动键值排序Angular 6
【发布时间】：2018-12-21 10:47:20
【问题描述】：

我在我的 ts 文件中创建了数组，并使用 ngFor 从数组中获取元素，但是当我使用键值时，角度会自动对数组进行排序。如何保存订单样数组已创建。

TS 代码：

filterListingTypeItems: { [key: string]: object } = {


  'For sale': [
      'For sale',
      'By Agent',
      'By ownre',
      'New Construction',
      'Foreclosures',
      'Coming Soon',
    ],
    'Potential listings': [
      'Potential listings',
      'Foreclosed',
      'Pre-Foreclosure',
      'Make Me Move',
    ],
    'For Rent': ['For Rent'],
    'Recently sold': ['Recently sold'],
    _________________________: ['Open House only', 'Pending & Under Contract'],
}

HTML 代码（角度材料）：

<mat-optgroup
          *ngFor="let listingOptions of (filterListingTypeItems | keyvalue)"
          [label]="listingOptions.key"
        >
          <mat-option
            *ngFor="let listingOption of listingOptions.value"
            [value]="listingOption"
            >{{ listingOption }}</mat-option
          >
</mat-optgroup>

it becomes like that (img)

【问题讨论】：

angular keyvalue pipe sort properties / iterate in order的可能重复

标签： angular typescript

【解决方案1】：

您可以在组件 ts 文件中创建一个返回 0 的函数。

function returnZero() {
return 0
}

模板文件内部

<td *ngFor="let item of cfValues | keyvalue : returnZero">

【讨论】：

【解决方案2】：

您创建的不是数组而是对象。所以一开始就没有顺序。

如果您需要订单，请创建一个数组而不是对象。

filterListingTypeItems = [
  {
    key: 'For sale',
    value: [
      'For sale',
      'By Agent',
      'By ownre',
      'New Construction',
      'Foreclosures',
      'Coming Soon',
    ]
  },
  ...
]

【讨论】：