Angular2 - Değişiklik yapılmadıkça değişikliği algılama gösterilmiyor

Question

Bazı arama terimlerini girebileceğiniz bir içeriğe sahibim ve içeriği * ngFor döngüsü kullanarak filtreleyecektir. Sorun, bir arama terimi girdiğimde, güncellemenin görsel olarak etkilenmesi için ekrana tıklamam gerekiyor.

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

Aramak etiketleri girin giriş alanına yürütür koddur:

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

İşte

döngü meydana geldiği html kodu parçasıdır Gönderi nesnesindeki statik işlev İşte burada:

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

Mesajları içeren kod İşte O üzerinde dolanır:

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

Yani bütün bunlar çalışır ama ekran tıklayın sürece değişim göstermiyor:

İşte

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

gözlemlenebilir alır postsService içinde kodudur. Güncellemek için manuel olarak çağırmanın bir yolu var mı? Bunu elle etiketler girişine yazarak güncellendikten sonra güncellenen updateSearchTags işlevi içinde arayabileceğimi düşünüyordum, ancak kodun bunu yapacağı konusunda emin değilim.

• Güncelleştirme, Olayı bir tuşa basma olayına dönüştürdüm. Ancak şimdi, bu olayın, iki noktadan bağlanma gerçekleştikten sonra gerçekleşmesini sağlamaya çalışıyorum, çünkü şimdi bağlayıcılık oluşmadan önce bunu yapıyor. Bir sonraki tıkladıktan sonra her char gösterir.

Güncelleştirme 2 - Anahtar teslimi etkinliği bulundu. Yayınlanan sıralı.

Answer 1

Verileri güncellemek için aşağıdaki şekilde gösterildiği gibi ChangeDetectorRef'u kullanmayı deneyin. Muhtemel sebep, servis kodunun Açısal çerçeve dışında kalması olabilir.

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

Değişiklik/bulanıklık/tuşa basma olayı yerine (anahtarlama) olayını kullandım.