angular2 파이프 및 새 데이터

Question

각도 파이프를 사용하여 로그를 처리하고 필터링합니다.

내 파이프

<input type="text" [(ngModel)]="filterLog" class="validate" /> 

<ul id="messages"> 
    <li *ngFor="let msg of messages | logFilter:filterLog"> <div class="chip">{{ msg.user }}</div> {{ msg.msg }}</li> 
</ul> 

새 메시지가 socket.io 입력

this.socket.on ('메시지'를 던질 추가 할 수 있습니다이

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

@Pipe({ 
name: 'logFilter' 
}) 
@Injectable() 
export class logFilterPipe implements PipeTransform { 
    transform(items: any[], args: any[]): any { 
    //console.log(items); 

    if (!args || args.length == 0) 
    { 
     return items; 
    } 

    return items.filter(item => item.msg.indexOf(args[0]) !== -1); 

} 
} 

HTML 부분처럼 보인다, 함수 (메시지, 사용자) { this.messages.push ({사용자 : 사용자, msg : 메시지}),

}

입력 한 텍스트를 입력하면 필터가 정상적으로 작동하지만 그 이후에 새 메시지가 추가되고 표시되지 않으면 (예 : 필터링 됨) 필터링 업데이트를 트리거하기 위해 호출 할 항목이있는 것 같습니까?

Answer 1

각도 변경 감지 파이프 불순한

가 Angular2마다 변화 검출 관을 실행한다

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

만들기 어레이 내부의 변화 만 배열 인스턴스 변경 (다른 배열 예를 전달)

를 감지하지 못하는 파이프가 사용되는 구성 요소에 대해 실행됩니다.

또는 수정 할 때마다 this arr = this.arr.splice()을 사용하여 변경 사항에 대한 배열의 다른 복사본을 작성하여 각도로 알림을받을 수도 있습니다.

유스 케이스 및 배열 크기에 따라 더 효율적입니다.