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

ポストオブジェクトの静的関数を次に示します。

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関数内でこれを手動で呼び出すことができると思っていましたが、どのコードがこれを行うかはわかりません。

• 更新、 私はイベントをkeypressイベントに変更しました。しかし、今私は、バインディングが発生する前にそれをやっているので、双方向バインディングが発生した後にこのイベントが発生するようにしようとしています。次の文字をクリックすると、各文字が表示されます。

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

私はchange/blur/keypressイベントの代わりに（keyup）イベントを使用しました。