angular 2向列表中添加新項目時，自定義管道不重新排序列表

我實現了一個order by管道，在DOM加載時工作正常。但是，當我向列表中添加新項目時，我的管道未被激活，並且已添加到列表中的新項目不是訂單 - 而是添加到列表中的最後一個位置。angular 2向列表中添加新項目時，自定義管道不重新排序列表

管：

import { PipeTransform, Pipe } from '@angular/core'; 

import { ITeam } from './team'; 

@Pipe({ 
    name: "LeagueFilter" 
}) 

export class LeagueFilterPipe implements PipeTransform { 
    transform(value: any[], filterBy: string): any[] { 
     filterBy = filterBy ? filterBy.toLocaleLowerCase() : null 

     for (let i = 0; i < value.length - 1; i++) { 
      for (let j = 0; j < value.length - 1; j++) { 
       if (value[j][filterBy] < value[j + 1][filterBy]) { 
        let temp = value[j] 
        value[j] = value[j + 1] 
        value[j + 1] = temp 
       } 
      } 
     } 
     return value; 
    } 
}

在HTML：

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-offset-1 col-sm-4"> 
      <h2> 
       {{leagueTable}} 
      </h2> 

      <table class="table table-responsive"> 
       <thead> 
        <tr> 
         <th>#</th> 
         <th>Team</th> 
         <th>Points</th> 
        </tr> 
       </thead> 
       <tbody> 
        <tr *ngFor="let team of teams | LeagueFilter:'points'; let i = index"> 
         <td>{{i+1}}</td> 
         <td>{{team.name}}</td> 
         <td>{{team.points}}</td> 
        </tr> 
       </tbody> 
      </table> 
     </div> 
    </div> 
      <div class="row"> 
      <fieldset class="col-sm-offset-1 col-lg-3"> 
       <legend>Add Team</legend> 
       <label for="name">Name&nbsp;&nbsp;</label> 
       <input type="text" name="" value="" [(ngModel)] = "newTeam.name" /> 
       <br/> 
       <label for="name">Points</label> 
       <input type="text" name="" value="" [(ngModel)] = "newTeam.points" /> 
       <button type="submit" (click)="addTeam()">Add</button> 
      </fieldset> 
     </div> 
</div>

組分：

import { Component } from '@angular/core'; 
import { ITeam } from './team'; 

@Component({ 
    selector: 'league-list', 
    moduleId:module.id, 
    templateUrl: 'league-list.component.html', 
    styleUrls: ['league-list.component.css'] 
}) 
export class LeagueListComponent { 
    leagueTable: string = "La Liga" 
    teams: ITeam[] = [ 
     { name: "Barcelona", points: 84 }, 
     { name: "Real Madrid", points: 85 }, 
     { name: "Valencia", points: 78 }, 
     { name: "Sevilla", points: 80 }, 
     { name: "Villareal", points: 62 }, 
    ] 
    newTeam:ITeam = { name:"", points:null }; 
    addTeam():void{ 
     this.teams.push(this.newTeam) 

    } 
}

來源

2016-11-24 Joe

管僅由角執行如果該值變化（或者參數FO如果有管道的話）

您的示例中沒有參數，值不會更改。 Angulars變化檢測不檢查數組的內容，只有在參考改變（到不同的數組實例，同爲對象的BTW）。

你可以做什麼

使管道不純

@Pipe({ 
    name: "LeagueFilter", 
    pure: false 
})

這種方式，管將與每一個變化檢測運行，其可以變得昂貴被執行。管道應小心不要做不必要的工作，例如緩存結果並使用IterableDiffer（如NgFor中使用的）來明確檢查數組是否有變化。

修改之後創建的數組的副本

this.teams.push(this.newTeam); 
this.teams = this.teams.slice();

這還可以成爲昂貴的，如果陣列是大和變化常常

發生引入人工管參數

this.teams.push(this.newTeam); 
this.teamsChanged++;

transform(value: any[], filterBy: string, teamsChanged:any /*ignored*/): any[] {

<tr *ngFor="let team of teams | LeagueFilter:'points':teamsChanged; let i = index">

該附加參數將導致管被稱爲每teamsChanged時間已被修改。

來源

2016-11-24 06:50:42

angular 2向列表中添加新項目時，自定義管道不重新排序列表

回答

相關問題