Question

我有一个小服务，可以从Web套接字中检索通知。在fillThemSomehow()方法中，它检索并将它们存储到数组中。

@Injectable()
export class WebsocketNotificationHandler {
    notifications: Array<Notification>;

    constructor() {
        this.notifications = [];
    }

    fillThemSomehow(): void {}
}

组件使用此服务来检索和显示通知：

@Component({ // selector, template, styles, pipes included })
export class NotificationsComponent {
    notificationsFilter: string = '';

    constructor(private _wsNotiHandler: WebsocketNotificationHandler) {}

    getLastNotifications(): Array<Notification> {
        return this._wsNotiHandler.notifications;
    }
}

...和组件HTML：

<input class="form-control" [(ngModel)]="notificationsFilter">
<div class="well notification" *ngFor="let notification of getLastNotifications()">
    <span [innerHtml]="notification.getHtml()"></span>
    <small class="pull-right">{{notification.time | dateTime}}</small>
</div>

到目前为止一切顺利，这非常有效。只要WebsocketNotificationHandler向数组添加新通知，它们就会在组件视图中可见。这真是太棒了。

但是，如果我现在想要使用自定义管道过滤视图中的通知，则服务数组中的修改不会直接发布到UI（仅在输入的按键上，因为notificationsFilter模型是改变）。 ngFor的模板代码现在看起来像这样：

<div class="well notification" *ngFor="let notification of getLastNotifications() | search:notificationsFilter">

SearchPipe经过测试并完成其工作。我唯一的问题是这个解决方案对WebsocketNotificationHandler.notifications的变化没有反应。我该怎么办才能使其反应？

我正在使用TypeScript和Angular2 RC.1。

Answer 1

只有当对象本身是另一个对象时，Angular才会在更改检测运行时检查对象的内容。您可以设置pure: false

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

即使它仍然是同一个数组实例，也要执行管道。

另见https://angular.io/docs/ts/latest/guide/pipes.html

绑定函数结果为Angular2组件（TypeScript）

1 个答案: