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

Answer 2

我使用了（keyup）事件而不是change / blur / keypress事件。

Angular2 - 除非点击

2 个答案: