कोणीय 2

Question

में एक एसिंक्रोनस सॉर्टिंग पाइप को कार्यान्वित करना मैं कोणीय 2 में एक कस्टम पाइप बनाने की कोशिश कर रहा हूं जो वस्तुओं की एक सरणी को सॉर्ट करेगा। मैंने this post से थोड़ी सी सहायता प्राप्त की। हालांकि, मुझे यह काम नहीं मिल रहा है।

मेरे पाइप इस तरह दिखता है:

@Pipe({ 
    name: "orderByAsync", 
    pure: false 
}) 
export class AsyncArrayOrderByPipe { 
    private _promise : Promise<Array<Object>>; 
    private _output: Array<Object>; 

    transform(promise: Promise<Array<Object>>, args: any): Array<Object>{ 
    var _property : string = ""; 
    var _descending : boolean = false; 

    this._property = args[0]["property"] || ""; 
    this._descending = args[0]["descending"] || false; 

    if(!this._promise) { 
     this._promise = promise.then((result) => { 
     result.sort((a: any, b: any) => { 
      if (a[this._property] < b[this._property]) return (this._descending ? 1: -1); 
      else if (a[this._property] > b[this._property]) return (this._descending ? -1: 1); 
      else return 0; 
     }); 

     this._output = result; 
     }); 
    } 

    return this._output; 
    } 
} 

पाइप के उपयोग इस प्रकार दिखाई देगा:

<div *ngFor="#c of countries | orderByAsync">{{c.name}}</div> 

दृश्य की तरह बात की सूचना नहीं है उस वादे को दूर किया है और डेटा कर दिया गया है यह लौटा हुआ।

मुझे क्या याद आ रही है?

Answer 1

निर्मित async पाइप ChangeDetectorRef इंजेक्ट करता है और वादा हल होने पर markForCheck() पर कॉल करता है। इसे एक पाइप में करने के लिए, आपको उस उदाहरण का पालन करना चाहिए। आप उस here के लिए टाइपस्क्रिप्ट स्रोत देख सकते हैं।

मैं सुझाव दूंगा कि, हालांकि, अपने आप को एसिंक को संभालने के बारे में भूलना और इसके बजाय एक शुद्ध स्टेटलेस सॉर्टिंग पाइप लिखना और इसे async पाइप में बनाया गया है। कि इसके लिए आपको अपना पाइप एक नंगे Array, नहीं एक वादा को संभालने के लिए लिखते थे, और इस तरह इसका इस्तेमाल:

<div *ngFor="#c of countries | async | orderBy">{{c.name}}</div> 

Answer 2

बस अपने पाइप जो तब कोणीय async पाइप के साथ बाध्य कर सकते हैं के बाहर एक BehaviorSubject लौट आते हैं।

const sub = new BehaviorSubject(null); 
setTimeout(() => { sub.next('value'); }, 3000); 
return sub; 

पूरा उदाहरण:

import { IOption } from 'somewhere'; 
import { FormsReflector } from './../forms.reflector'; 
import { BehaviorSubject } from 'rxjs'; 
import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({ name: 'getOptions' }) 
export class GetOptionsPipe implements PipeTransform { 

    public transform(value, ...args: any[]) { 
    const _subject = new BehaviorSubject('-'); 
    if (args.length !== 2) { 
     throw `getOptions pipe needs 2 arguments, use it like this: {{ 2 | getOptions:contract:'contractType' | async }}`; 
    } 
    const model = args[0]; 
    if (typeof model !== 'object') { 
     throw `First argument on getOptions pipe needs to be the model, use it like this: {{ 2 | getOptions:contract:'contractType' | async }}`; 
    } 
    const propertyName = args[1]; 
    if (typeof propertyName !== 'string') { 
     throw `Second argument on getOptions pipe needs to be the property to look for, ` + 
     `use it like this: {{ 2 | getOptions:contract:'contractType' | async }}`; 
    } 
    const reflector = new FormsReflector(model); 
    reflector.resolveOption(propertyName, value) 
    .then((options: IOption) => { 
     _subject.next(options.label); 
    }) 
    .catch((err) => { 
     throw 'getOptions pipe fail: ' + err; 
    }); 
    return _subject; 
    } 
}