Angular 7 Keypair表达式顺序

Question

我正在尝试用 Angular 7 构建一个 table out，它有一个 table 作为父组件，每一行都有子组件，第一行除外.我将键值管道值传递到每一行，在显示子组件之前，我还首先循环访问父组件中的键值对（见图）。我正在使用 ngFor 遍历键值对，但我正在与它在子组件中显示的顺序作斗争。我知道默认情况下，键值是根据键按字母顺序返回的。我能够在父组件 ngFor 上为它的表达式设置 use null 并且它工作正常，但是当我尝试对表达式使用 null 时我在子组件中遇到错误。这是我得到的：

table.component.ts

这是在导出中 class。

intervals: {[key: string]: string} = {
    'past-hour': 'Past Hour',
    'today': 'Today',
    'yesterday': 'Yesterday'
  };

// This is the one that I'm having trouble with.
responseStatus: {[key: string]: string} = {
    'success': 'Success',
    'error': 'Error %',
    'throttle': 'Throttle %'
};

table.component.html

<table class="compare-table text-right">
  <tbody>
    <tr>
      <td></td>
      <!-- The null works here -->
      <td *ngFor="let status of responseStatus | keyvalue: null">
        {{ status.value }}
      </td>
    </tr>
    <tr 
      table-row 
      *ngFor="let interval of intervals | keyvalue: null" 
      [interval]="interval" 
      [responseStatuses]="responseStatus">
    </tr>
  </tbody>
</table>

table-row.component.ts

export class TableRowComponent implements OnInit {
  @Input() interval; 
  @Input() responseStatuses: {[key: string]: string};

  constructor() { }

  ngOnInit() {
  }

}

table-row.component.html 前端出现此错误（编译正常）。如果我删除空值，它会按字母顺序显示。因此，它不像第一行那样显示成功、错误和节流，而是显示错误、成功、节流。

<td>
  {{ interval.value}}
</td>
<td *ngFor="let response of responseStatuses | keyvalue: null">
  {{ response.value }}
</td>

它是如何在子项中没有 null 的情况下显示的：

感谢任何人的反馈。我对此非常陌生，想了解我到底做错了什么。 :) 谢谢！

更新事实证明，控制台也不喜欢父组件上的空值，但它起作用了……我想要做的就是按设置的顺序显示键值对——而不是按字母顺序。这是 stackblitz.

Answer 1

根据此处的文档：https://angular.io/api/common/KeyValuePipe

The output array will be ordered by keys. By default the comparator will be by Unicode point value. You can optionally pass a compareFn if your keys are complex types.

所以排序是设计的。正如它所说，您可以提供比较功能，但我看不出这会有什么帮助。不会有 "as written" 排序（据我所知）。

keyvalue 管道相对较新……所以这里的一个选择是按照我们在 keyvalue 管道之前的做法，即在代码中处理它。

在组件中：

  get keys() : Array<string> {
    console.log(this.responseStatus);
    return Object.keys(this.responseStatus);
  }

此代码 returns 只是按定义顺序排列的一组键。

在html:

<div *ngFor="let key of keys">
  {{ responseStatus[key] }}
</div>

此代码遍历这些键并访问键值对中的元素。

已更新 stackblitz：https://stackblitz.com/edit/angular-xucsn6

Angular 7 Keypair表达式顺序

Angular 7 Keypair expression order

key-value

angular