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 - 更改檢測不會顯示，除非點擊

回答

相關問題