Angular 2.問題與* ngFor，當我使用管道

Question

我有一個組件。

@Component({ 
    selector: 'top3', 
    templateUrl: 'dev/templates/top3.html', 
    pipes: [orderBy], 
    providers: [HTTP_PROVIDERS, ParticipantService] 
}) 
export class AppTop3Component implements OnInit { 

    constructor (private _participantService: ParticipantService) {} 

    errorMessage: string; 
    participants: any[]; 

    ngOnInit() { 
     this.getParticipants(); 
    } 

    getParticipants() { 
     this._participantService.getParticipants() 
      .then(
       participants => this.participants = participants, 
       error => this.errorMessage = <any>error 
      ); 
    } 

} 

此組件使用的服務名爲_participantService。 _participantService檢索一個對象數組。我輸出我的數組中component`s模板對象：

<h2>Top 3</h2> 
<table class="table table-bordered table-condensed" cellpadding="0" cellspacing="0"> 
    <thead> 
     <tr> 
      <th>#</th> 
      <th>Name</th> 
      <th>Score</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr *ngFor="#participant of participants | orderBy: '-score'; #i = index"> 
      <td>{{i+1}}</td> 
      <td>{{participant.username}}</td> 
      <td>{{participant.score}}</td> 
     </tr> 
    </tbody> 
</table> 

我使用了一個管道，命名orderBy與*ngFor指令。問題是，當我不`噸以這種方式使用管道和輸出數組：

<tr *ngFor="#participant of participants; #i = index"> 

一切正常，我已經有了一個正確的結果：

但是，當我要排序我對象的數組，並使用我管，我沒有任何輸出：

I`ve我管F的得到了一個未定義的對象結^

@Pipe({ 
    name: 'orderBy', 
    pure: false 
}) 

export class orderBy implements PipeTransform { 
    transform(arr: any[], orderFields: string[]): any { 
     console.log(arr); 
     orderFields.forEach(function(currentField: string) { 
      var orderType = 'ASC'; 

      if (currentField[0] === '-') { 
       currentField = currentField.substring(1); 
       orderType = 'DESC'; 
      } 

      arr.sort(function(a, b) { 
       return (orderType === 'ASC') ? 
         (a[currentField] < b[currentField]) ? -1 : 
         (a[currentField] === b[currentField]) ? 0 : 1 :                             
         (a[currentField] < b[currentField]) ? 1 : 
         (a[currentField] === b[currentField]) ? 0 : -1; 
      }); 

     }); 
     return arr; 
    } 
} 

Answer 1

由於您使用異步承諾加載數據，他們在一開始空（在當時的法定義的第一個回調之前被調用）。

您需要檢查管道中的參數是否爲空。如果是這樣，你不應該執行「按順序」處理...

當結果將在那裏，管道將再次與數據調用（不會爲空）。在這種情況下，你就可以對數據進行排序...

你可以試試這個代碼：

@Pipe({ 
    name: 'orderBy', 
    pure: false 
}) 

export class orderBy implements PipeTransform { 
    transform(arr: any[], orderFields: string[]): any { 
     if (arr==null) { 
     return null; 
     } 
     (...) 
    } 
} 

Answer 2

按照管道（https://angular.io/docs/ts/latest/guide/pipes.html#!#jsonpipe）的文檔的例子，你錯過了括號：

<tr *ngFor="#participant of (participants | orderBy: '-score'); #i = index"> 

Answer 3

不是修改你的管道實現處理空（即@亨利的答案），你可能不是簡單地定義你的組件空數組：

participants = []; 

當數據來自服務器後面，無論是推項目到現有陣列，

.then(participants => this.participants.push(...participants), 

或做什麼你已經完成：分配一個新的數組。

請注意，...是一個ES2015 feature。