Angular2 - 更改检测不会显示，除非点击

我有一个组件，您可以在其中输入一些搜索条件，并使用* ngFor循环过滤内容。麻烦的是当我输入一个搜索字词时，我需要单击屏幕以使更新生效。Angular2 - 更改检测不会显示，除非点击

下面是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(','); 
}

以下是帖子对象上的静态功能：

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函数内手动调用这个函数，该函数在输入标签输入搜索后更新，但我不确定哪些代码会执行此操作。

更新，我已将事件更改为按键事件。但是现在，我正尝试在双向绑定发生后发生此事件，因为它现在只是在绑定发生之前进行。它只是显示每个字符后点击下一个。

更新2 - 找到关键事件。发布排序。

来源

2016-10-28 Pete

尝试使用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 
       }); 
}

来源

2016-10-28 17:16:51 micronyks

我试过了你的代码。它似乎不会更新，直到我离开标签搜索字段的焦点。我已经在updateSearchTags函数的结尾尝试了this.cdr.detectChanges（），但没有好处。 – Pete

这对我来说是一个类似的问题，其中在Observable处理程序中设置模型值直到视图中的点击/ UI操作才导致UI更新。 – c0bra

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

来源

2016-10-28 20:44:21 Pete

Angular2 - 更改检测不会显示，除非点击

回答

相关问题