कोणीय 2 -

Question

पर क्लिक किए जाने तक पता लगाने का पता लगाना नहीं है मेरे पास एक घटक है जिसमें आप कुछ खोज शब्द दर्ज कर सकते हैं और यह * ngFor loop का उपयोग करके सामग्री फ़िल्टर करेगा। समस्या तब होती है जब मैं एक खोज शब्द दर्ज करता हूं, मुझे अद्यतन के लिए दृश्यमान रूप से प्रभाव के लिए स्क्रीन पर क्लिक करने की आवश्यकता होती है।

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

यहां कोड है जो पोस्ट प्राप्त करता है उस पर फंस रहे हैं:

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

तो यह सब काम करता है लेकिन जब तक मैं स्क्रीन पर क्लिक करें परिवर्तन नहीं दिखा रहा है:

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

यहाँ postsService में कोड जो नमूदार हो जाता है। इसे अपडेट करने के लिए मैन्युअल रूप से कॉल करने का कोई तरीका है। मैं सोच रहा था कि मैं इसे मैन्युअल रूप से अद्यतन सर्चटैग फ़ंक्शन के भीतर कॉल कर सकता हूं जिसे टैग इनपुट द्वारा खोज में टाइप करने के बाद अपडेट किया गया है लेकिन मुझे यकीन है कि यह कोड क्या करेगा।

• अद्यतन, मैं एक कुंजी दबाने घटना के लिए घटना को बदल दिया है। अब हालांकि मैं इस घटना को दो तरह से बाध्यकारी होने के बाद होने की कोशिश कर रहा हूं क्योंकि यह अब बाध्यकारी होने से पहले ही कर रहा है। अगली बार क्लिक करने के बाद यह प्रत्येक char को दिखाता है।

अद्यतन 2 - कुंजीपटल घटना मिली। जारी क्रमबद्ध

Answer 1

डेटा अपडेट करने के लिए नीचे दिखाए गए अनुसार ChangeDetectorRef का उपयोग करने का प्रयास करें। संभावित कारण यह हो सकता है कि आप सेवा कोड कोडुलर ढांचे से बाहर चल रहे हैं।

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

मैंने परिवर्तन/धुंध/कीप्रेस घटना के बजाय (कीप) घटना का उपयोग किया।