각도 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 변화 검출 기준을 변경하는 경우에만, 배열의 내용을 확인하지 않는 (BTW 개체에 대한 다른 배열 인스턴스 동일.)

무슨

• 파이프의 비를 확인 할 수있다 순수

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

파이프가 비싼이 될 수있는 모든 변경 감지 실행으로 실행됩니다 이런 식으로

. 파이프는 예를 들어 결과 캐싱과 같은 불필요한 작업을 수행하지 말고 IterableDiffer ( NgFor에서 사용 된 것과 같이)을 사용하여 배열의 변경 사항을 명시 적으로 확인해야합니다. 배열이 크고 변화가 종종

• 일 인공 관을 소개하는 경우
  • 이 또한 비용이 될 수 있습니다

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

  수정 후 배열의 복사본을 생성 매개 변수

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

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

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

이 추가 파라미터는 파이프가 수정 될 때마다 teamsChanged 호출되게한다.