Question

我有这个对象

  {
  "id": 1,
  "paragraphText": "I'm some Paragraph Text",
  "paragraphName": "new paragraph",
  "paragraphPlacement": {
    "id": 1,
    "order": 1
  }
}
  {
  "id": 1,
  "paragraphText": "I'm another Paragraph Text",
  "paragraphName": "old paragraph",
  "paragraphPlacement": {
    "id": 1,
    "order": 2
  }
}

我正在尝试使用键值管道对其进行排序。

<div class="col-8">
<div *ngFor="let paragraph of offer.offerContent.paragraphs | keyvalue">
{{paragraph.paragraphName}} : {{paragraph.paragraphPlacement.order}}

据我了解，keyvalue期望使用key：value映射，但是有角度的文档说您可以使用comparefn来比较复杂的对象，但是我找不到任何文档或如何使用comparefn的示例。因此，我的问题是如何使用comparefn在“ paragraphPlacement：order”值上对上述示例进行排序。

Answer 1

要获得预期的结果，请使用下面的将键和值对与compareFn结合使用的选项

问题：
在使用keyValue管道时，在ngFor内部使用 paragraph.value 访问每个对象

 <div *ngFor="let paragraph of obj | keyvalue">
    {{paragraph.value.paragraphName}} :
    {{paragraph.value.paragraphPlacement.order}}
    <div>

要按值对对象进行排序，请使用以下比较功能通过比较值并返回1，-1和0（如果比较相等的值）

  sortOrder = (old, nw) => {
        if(old.value.paragraphPlacement.order < nw.value.paragraphPlacement.order){
          return 1
        }else{
          return -1
        }
  }

component.html：

<div *ngFor="let paragraph of obj | **keyvalue** : **sortOrder**">
    {{paragraph.value.paragraphName}} : {{paragraph.value.paragraphPlacement.order}}
    <div>

工作代码示例
https://codesandbox.io/s/angular-xs3d3

如何对复杂对象使用Angular 8键值和compareFn

1 个答案: