आरएक्सजेएस पर्यवेक्षक

Question

की सरणी पर सरल फ़िल्टर मैं अंगुलर 2 के साथ अपनी परियोजना शुरू कर रहा हूं और डेवलपर्स वादे के बजाए आरएक्सजेएस वेधशाला की सिफारिश कर रहे हैं।

मैंने सर्वर से तत्वों (महाकाव्य) की एक सूची पुनर्प्राप्त करने के लिए हासिल किया है। लेकिन मैं उदाहरण के लिए उपयोग करके elments को फ़िल्टर कैसे कर सकता हूं?

निम्नलिखित कोड मेरे ऐप से एक निष्कर्षण है और अब अंतिम कार्य समाधान दिखाता है। आइए आशा करते हैं कि यह किसी की मदद करे।

@Injectable() 
export class EpicService { 

    private url = CONFIG.SERVER + '/app/'; // URL to web API 

    constructor(private http:Http) {} 

    private extractData(res:Response) { 
    let body = res.json(); 
    return body; 
    } 

    getEpics():Observable<Epic[]> { 
    return this.http.get(this.url + "getEpics") 
     .map(this.extractData) 
     .catch(this.handleError); 
    } 

    getEpic(id:string): Observable<Epic> { 
    return this.getEpics() 
     .map(epics => epics.filter(epic => epic.id === id)[0]); 
    } 
} 

export class EpicComponent { 

    errorMessage:string; 
    epics:Epic[]; 
    epic:Epic; 

    constructor(
    private requirementService:EpicService) { 
    } 

    getEpics() { 
    this.requirementService.getEpics() 
     .subscribe(
     epics => this.epics = epics, 
     error => this.errorMessage = <any>error); 
    } 

    // actually this should be eventually in another component 
    getEpic(id:string) { 
    this.requirementService.getEpic(id) 
     .subscribe(
     epic => this.epic = epic, 
     error => this.errorMessage = <any>error); 
    } 
} 

export class Epic { 
    id: string; 
    name: string; 
} 

आपकी मदद के लिए अग्रिम धन्यवाद।

Answer 1

आप वास्तविक सरणी फ़िल्टर करना चाहते हैं और इसके चारों ओर देखे जाने योग्य अवलोकन नहीं करना चाहते हैं। तो आप ऑब्जर्जेबल (जो Epic[] है) फ़िल्टर की गई Epic पर सामग्री को मैप करेंगे।

getEpic(id:number): Observable<Epic> { 
    return this.getEpics() 
    .map(epics => epics.filter(epic => epic.id === id)[0]); 
} 

फिर बाद में आप कर सकते हैं getEpic करने के लिए subscribe और जो कुछ भी आप इसके साथ चाहते हैं।

Answer 2

Observables आलसी हैं। observable को अपना अनुरोध भेजने के लिए आपको subscribe पर कॉल करना होगा।

getEpic(id:number) { 
    return this.getEpics() 
      .subscribe(x=>...) 
      .filter(epic => epic.id === id); 
    } 

Answer 3

डेटा प्राप्त करने के लिए आपको Observable पर सब्सक्राइब करना होगा, क्योंकि http कॉल जावास्क्रिप्ट में एसिंक हैं।

getEpic(id: number, callback: (epic: Epic) => void) { 
    this.getEpics().subscribe(
     epics: Array<Epic> => { 
      let epic: Epic = epics.filter(epic => epic.id === id)[0]; 
      callback(epic); 
     } 
    ); 
} 

आप इस तरह तो है कि विधि कॉल कर सकते हैं:

this.someService.getEpic(epicId, (epic: Epic) => { 
    // do something with it 
}); 

Answer 4

आप इस flatMap और filter बजाय map में जे एस सरणी फिल्टर विधि Observable के तरीकों का उपयोग कर सकते हैं। कुछ की तरह:

this.getEpics() // [{id: 1}, {id: 4}, {id: 3}, ..., {id: N}] 
    .flatMap((data) => data.epics) 
    .filter((epic) => epic.id === id) // checks {id: 1}, then {id: 2}, etc 
    .subscribe((result) => ...); // do something epic!!! 

flatMap छानने के लिए विलक्षण सूचकांक प्रदान करेगा और फिर आप जो कुछ भी परिणाम के साथ आगे क्या होता है के साथ पर मिल सकती है।

टाइपप्रति यह दर्शाता है कि आप एक स्ट्रिंग और एक नंबर फिल्टर में == के आपके उपयोग की परवाह किए बिना तुलना नहीं कर सकते सिर्फ फिल्टर में epic.id से पहले एक + जोड़ने के लिए, कोणीय डॉक्स प्रति एक त्रुटि फेंकता हैं:

.flatMap(...) 
    .filter((epic) => +epic.id === id) // checks {id: 1}, then {id: 2}, etc 
    .subscribe(...)