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 中的代码:

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

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

• 更新，我已将事件更改为按键事件。然而，现在我试图让这个事件在两种方式绑定(bind)发生之后发生，因为它现在只是在绑定(bind)发生之前发生。单击下一个字符后，它只会显示每个字符。

更新 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
                });
}