2016-08-23 2 views
1

Я работаю над угловой трубой для обработки и фильтрации бревен.угловой2 труба и новые данные

моя труба выглядит эта

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 часть

<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 ('сообщение', функция (сообщение, пользователь) { это.messages.push ({пользователь: пользователь, сообщение: сообщение});

}

Фильтр отлично работает, если я ввожу текст ввода, но если новые сообщения добавляются после этого, там и не отображаются (например, отфильтрованные), я думаю, есть что вызвать, чтобы вызвать обновление фильтрации?

ответ

1

Обнаружение Углового изменения не обнаруживает изменения внутри массивов, только изменения экземпляра массива (передача другого экземпляра массива)

Изготовление нечистых трубы

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

делает Angular2 выполнить трубу каждого обнаружение изменения времени выполняется для компонента, в котором используется труба.

В качестве альтернативы вы также можете использовать this arr = this.arr.splice() после каждой модификации, чтобы создать другую копию массива для изменения, чтобы получить уведомление от Angular.

Это зависит от варианта использования и размера массива, который более эффективен.

Смежные вопросы