Angular - 添加数据后数组未排序

debugcn 发表于 Dev

贾雷思

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

为此，我使用了一个管道，我在下面的代码中设置了它。

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

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

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);
        }
      }
    });
  }
}

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

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

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

}

示例工作

{
        "_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"
        }
    }

斯沃克斯

您尝试访问模板中的异步调用。如果加载速度很快，则根本不会加载对象。

在您的 html 中，您尝试：

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

相反，它应该{{job?.Location?.Name}} {{job?.Name}}在 Angular2 或{{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;

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。