角度2リストに新しい項目を追加するときに、カスタムパイプが並べ替えられないリスト

Question

DOMロード時にうまく動作するorderbyパイプを実装しました。しかし、新しい項目をリストに追加すると、私のパイプはアクティブ化されておらず、リストに追加された新しい項目は順序ではなく、リストの最後の場所に追加されます。

管：

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) 

    } 
} 

Answer 1

パイプのみ角度で実行される場合、値の変化（またはパラメータFOもしあればパイプ）

例にパラメータはなく、値は変更されません。 Angulars変化検出は、参照が変更された場合にのみ、配列の内容をチェックしません（ところでオブジェクトのために、異なる配列インスタンスに同じ。）

何が

• は、パイプの非を作る行うことができます

@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が変更されたすべての時間と呼ばれるようになります。