Angular2 - 除非单击，否则不会显示更改检测 [英] Angular2 - Change detection not showing unless clicked

问题描述

我有一个组件，您可以在其中输入一些搜索词，它会使用 *ngFor 循环过滤内容.麻烦的是，当我输入搜索词时，我需要点击屏幕才能使更新在视觉上生效.

I have an component in which you can enter some search terms and it will filter the content using a *ngFor loop. The trouble is when I enter a search term I need to click the screen for the update to take effect visually.

这是发生循环的 html 代码部分:

Here is the part of the html code in which the loop occurs:

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

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

The code that executes on the input field where you enter the tags to search for is:

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

这里是 post 对象上的静态函数:

Here is the static function on the post object:

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

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

Here is the code which gets the posts that are looped over:

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

这是获得 observable 的 postsService 中的代码:

Here is the code in the postsService which gets the observable:

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

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

So all this works but the change is not showing unless I click the screen. Is there a way to manually call it to update. I was thinking I could call this manually within the updateSearchTags function which is updated after typing in the search by tags input but I am unsure of what code would do this.

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

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

Update 2 - Found the keyup event. Issued sorted.

推荐答案

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

Try to use ChangeDetectorRef as shown below to update data. Possible reason could be that you're service code is running out of Angular framework.

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

这篇关于Angular2 - 除非单击，否则不会显示更改检测的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！