Angular - 在添加數據後未對數組進行排序

我有一個名爲JobList的組件，它當前從文件中獲取JSON對象（稍後將成爲Web服務器）並顯示頁面上的作業列表。我希望列表按照Status.Order的每個作業中的屬性進行排序。Angular - 在添加數據後未對數組進行排序

要做到這一點，我正在使用一個管道，我已經在下面的代碼中設置。

問題：如果我不使用管道，作業將按文件順序顯示，但如果使用管道，則根本不會顯示任何內容。我在管道代碼中做錯了什麼？

如果我在管道代碼中的變換函數中添加一個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" 
 
     } 
 
    }

來源

2017-09-01 Jareth

後，你有某種錯誤在你的Web控制檯？我在我應該工作的項目中實施了同樣的事情。雖然我能看到的唯一區別是我沒有使用'new Array（）'，而是使用通用的'[]' – masterpreenz

您嘗試訪問模板中的異步調用。如果它加載到快速，它根本不加載對象。

在你的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;

來源

2017-09-01 10:38:35 Swoox

謝謝。這解決了空白問題，但對象仍未被排序。思考？ – Jareth

@Jareth檢查我的更新 – Swoox

Docs：管道是默認純 ...

角執行一個純粹的管道只有當它檢測到一個純粹的改變輸入值。純粹的改變是改變原始輸入值（String,Number,Boolean,Symbol）或改變的對象參考（Date,,Object）。

在這裏，我們沒有改變對象引用，你只是將值推入數組。

@Pipe({ 
    name: 'orderByStatus' 
    pure: false // here 
})

但我真的建議你將要重新考慮，performancewise，作爲文檔繼續說...

角執行不純的管道：您可以通過標記管不純解決這個在每個元件更換檢測週期中。經常調用不純的管道，就像每次按鍵或鼠標移動一樣。

考慮到這種擔心，小心使用不純管道。昂貴的，長期運行的管道可能會破壞用戶體驗。

這是在Angular中沒有orderBy管的主要原因，與AngularJS相反。

我建議你實現組件的分類和排序您收到的數據:)

來源

2017-09-01 18:28:53 Alex

Angular - 在添加數據後未對數組進行排序

回答

相關問題