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

这是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.

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

• Update, I have changed the event to a keypress event. Now however I am trying to get this event to happen after the two way binding happens as it is now just doing it before the binding occurs. It just shows each char after you click the next one.

更新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屋！