Angular2 - 除非单击,否则不会显示更改检测

Question

我有一个组件,您可以在其中输入一些搜索词,它将使用*ngFor循环过滤内容.问题是当我输入搜索词时,我需要点击屏幕以使更新生效.

以下是发生循环的html代码的一部分:

    <li *ngFor="let item of posts | reverse; let i = index; ">
        <div class="media" *ngIf="item.doesContainTags(searchTags)">

在输入要搜索的标记的输入字段上执行的代码是:

 updateSearchTags() {
    event.stopPropagation();
    // sorter is what is types into the search by tag input field
    this.searchTags = this.sorter.split(',');
 }

这是post对象的静态函数:

  doesContainTags(searchTags: string[]): boolean {

    let array = this.tags.split(',');
    if(!array || array.length === 0) {return false;}
    if(!searchTags || searchTags.length === 0) {return false;}

    for(let searchTag of searchTags){
         if(array.indexOf(searchTag) === -1) {

        } else {
        return true;
        }
    }
    return false;
 }

这是获取循环的帖子的代码:

            this.postsService.subscribeAllPosts()
            .do(console.log)
            .subscribe( posts => this.posts = posts);

以下是postsService中获取observable的代码:

 subscribeAllPosts(): Observable<Post[]> {
    return this.af.database.list('posts')
    .map(Post.fromJsonList);
 }

所以这一切都有效,但除非我点击屏幕,否则不会显示更改.有没有办法手动调用它来更新.我想我可以在updateSearchTags函数中手动调用它,在按标签输入搜索后更新但是我不确定代码会执行此操作.

• 更新,我已将事件更改为按键事件.然而,现在我试图在双向绑定发生之后发生这个事件,因为它现在只是在绑定发生之前这样做.它只是在您单击下一个字符后显示每个字符.

更新2 - 找到了keyup事件.发布排序.

Answer 1

尝试使用ChangeDetectorRef如下所示更新数据.可能的原因可能是您的服务代码用完了Angular框架.

import { Component, ChangeDetectorRef } from 'angular2/core';

@Component({
  (...)
})
export class MyComponent {
  constructor(private cdr:ChangeDetectorRef) {}   //<<### here

  this.postsService.subscribeAllPosts()
                   .do(console.log)
                   .subscribe( posts => {

                        this.posts = posts;        
                        this.cdr.detectChanges();  //<<<### here
                });
}