angular2管道和新数据答案

【问题标题】：angular2 pipe and new dataangular2管道和新数据
【发布时间】：2016-08-23 16:08:40
【问题描述】：

我正在研究用于处理和过滤原木的角管。

我的管道是这样的

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('message', function(message, user) { this.messages.push({user:user,msg:message});

}

如果我输入输入文本，过滤器可以正常工作，但如果在此之后添加了新消息，并且没有显示（例如过滤），我想有什么可以调用来触发过滤更新？

【问题讨论】：

标签： angular socket.io

【解决方案1】：

角度变化检测不检测数组内部的变化，只检测数组实例的变化（传递不同的数组实例）

使管道不纯

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

让Angular2在每次对使用管道的组件执行更改检测时执行管道。

或者，您也可以在每次修改后使用 this arr = this.arr.splice() 来创建数组的不同副本，以便 Angular 通知更改。

这取决于用例和数组大小，哪种方法更有效。

【讨论】：