Question

我有一个名为JobList的组件，它当前从文件中获取一个JSON对象（稍后将是一个Web服务器），并在页面上显示一个作业列表。我希望列表按每个名为Status.Order的作业中的属性进行排序。

要做到这一点，我正在使用我已设置的管道，如下面的代码所示。

问题：如果我不使用管道，则作业会按文件顺序显示，但如果我使用管道，则根本不会显示任何内容。我在管道代码中做错了吗？

如果我在管道代码中的tranform函数中添加了console.log，那么我可以看到正在传入一个空数组。我希望在添加数据时看到第二次调用，但什么都没有。

＆＃13;

export class JoblistComponent implements OnInit {

  private openJobs = new Array();
  private activeJobs = new Array();

  constructor() { }

  ngOnInit() {

    const openJobs = this.openJobs;
    const activeJobs = this.openJobs;

    $.getJSON('assets/data/jobs.json', function (json: Array<any>) {

      for (const job of json) {
        if (job.Status.Section === 'Active') {
          activeJobs.push(job);
        } else {
          openJobs.push(job);
        }
      }
    });
  }
}

＆＃13;

要呈现我正在使用此HTML的内容。

＆＃13;

 <div class="job" *ngFor="let job of openJobs | orderByStatus" [ngStyle]="{ 'border-left-color': job.Group.Colour }">
        <span class="title">12 Example Street, {{job.Location.Name}}</span>
        <span>{{ job.Name }}</span>
        <span>{{ job.Type.Name }}</span>
      </div>

＆＃13;

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'orderByStatus'
})
export class OrderByStatusPipe implements PipeTransform {

  transform(array: Array<any>, args?: any): any {

    array.sort((a: any, b: any) => {
      if (a.Status.Order < b.Status.Order) {
        return -1;
      } else if (a.Status.Order > b.Status.Order) {
        return 1;
      } else {
        return 0;
      }
    });

    return array;
  }

}

＆＃13;

示例作业

＆＃13;

{
        "_id": "597b5a700c1d413f20c4d67a",
        "Name": "JOB-20170628-029",
        "Created": "2017-07-28T15:38:24.619Z",
        "Group": {
            "_id": "5919e2f96b1822dc0daf94d5",
            "Name": "Priority 3",
            "Colour": "#1bb934",
            "Order": 3,
            "Class": "priority3"
        },
        "Type": {
            "Name": "Type 2",
            "_id": "597b5a680c1d413f20c4b5fc"
        },
        "Status": {
            "Order": 2,
            "Section": "Active"
        }
        "Description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sed lacus sit amet enim congue molestie. \nAenean pharetra tincidunt ligula a luctus. In vel interdum lacus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
        "Location": {
            "Postcode": "RG31 6PL",
            "Name": "RG31 6PL"
        }
    }

＆＃13;

Answer 1

您尝试在模板中访问异步调用。如果它加载到快速，它根本不加载对象。

在你的HTML中，你试试：

    <span class="title">12 Example Street, {{job.Location.Name}}</span>
    <span>{{ job.Name }}</span>
    <span>{{ job.Type.Name }}</span>

相反，它应该是Angular2中的{{job?.Location?.Name}} {{job?.Name}}或{{job.Location.Name | async}} Angular4

休息了

<强>更新

尝试：

如果没有工作，请console.log(a)和console.log(b)

if (a.Status.Order < b.Status.Order) {
        return -1;
      } 
if (a.Status.Order > b.Status.Order) {
        return 1;
      } 
        return 0;

Answer 2

Docs：管道默认纯 ...

只有在检测到输入值的纯变化时，Angular才会执行纯管道。纯更改可以是对原始输入值（String，Number，Boolean，Symbol）的更改，也可以是更改的对象引用（Date，{ {1}}，Array，Function）。

这里我们没有对象引用的更改，只是将值推送到数组。您可以通过将管道标记为不纯来解决此问题：

Object

但我真的建议你在表现方面重新考虑一下，正如文档继续说的那样......

Angular在每个组件更改检测周期内执行不纯的管道。经常调用不纯的管道，就像每次按键或鼠标移动一样。

考虑到这一点，请小心实施不纯净的管道。昂贵，长时间运行的管道可能会破坏用户体验。

与AngularJS相反，这是Angular中没有@Pipe({ name: 'orderByStatus' pure: false // here })管道的主要原因。

我建议你在收到数据后在组件中实现排序和排序：）

Angular - 添加数据后不排序的数组

2 个答案: