2016-11-22 13 views
5

Her biri bir son tarih olan bir Görevler koleksiyonu içeren sahte bir dosyam var. Şu anda (aşağıda) Abone olduğumda alay konusu Görevlerin toplanmasını döndüren basit bir gözlemlenebilir yaratım var. Benim anlayamadığım şey, düz bir Görev dizisini, son kullanma tarihlerine göre gruplandırmak için nasıl işleyebildiğim;Angular2 RxJS - Alay edilmemiş bir hizmet için gözlenebilir bir oluşturma oluşturma

// Current data structure (unstructured) 
[{due: "2016-01-01"}, {due: "2016-01-01"}, {due: "2016-01-02"}, ...] 

// Desired structure for consumption 
{ 
    "2016-01-01": [{...}, {...}], 
    "2016-01-02": [{...}, {...}, {...}], 
    "2016-01-03": [{...}] 
} 

Şu andaki gözlemlenebilir üretim kodum aşağıdaki gibidir;

şöyle benim bileşeninde tüketilen
// Service... 
tasks: Observable<Task[]>; 

// init() called from the constructor 
private init() { 
    this.tasks = Observable.create(observer => { 
    observer.next(mockTasks); 
    }); 
} 

getTasks() { 
    return this.tasks; 
} 

;

// Component... 
ngOnInit() { 
    this.taskService.getTasks().subscribe(tasks => { 
    this.tasks = tasks; // Contains the collection of tasks as expected 
    }); 
} 

Bu iyi çalışıyor - Görevlerimi beklediğim gibi geri alıyorum. Yukarıdakileri gerçekleştirmek için groupBy operatörünü kullanmayı denedim ancak Observable.create() aracılığıyla oluşturulan gözlenebilir, bu yönteme sahip görünmüyor. Bunu başarmaya çalışmak için this resource'a başvurdum ve .create() yerine Observable.from() kullanıldığını fark ettim, ancak bu da hizmetimde kullanılabilir bir işlev olarak görünmüyor.

  1. (örneğin groupBy gibi) yukarıdaki gibi (ve nasıl bu başarılabilir) verileri biçimlendirme ile gitmek yolu RxJS operatörleri kullanarak mı? Yoksa el ile biçimlendirilmeli mi?
  2. 1'e yanıtla ilgili olarak - bu nerede yapılmalıdır?

Teşekkürler!

+1

Her zaman 'Observable.from (mockTasks) 'veya' Observable.of (mockTasks) 'gibi basittir. Hangi çıktıya ihtiyacınız olduğuna bağlıdır, çünkü observer.next (mockTasks), birçok nesne değeriyle değil, tek bir dizi değeriyle gözlenebilir bir değer yaratır.İstenen herhangi bir yöntem yoktur, "import rxjs/add/observable" ve "import rxjs/add/operator" ile manuel olarak eklenmelidir, aksi takdirde Angular çekirdek modülleri tarafından eklenmiş olan birkaç temel yöntemle sonuçlanır. – estus

cevap

2

Bazı şeyleri karıştırıyorsunuz sanırım. Gözlemciler her zaman içinde faktör zamanına sahip olurlar, bu yüzden gözlenebilir bir şey aracılığıyla zaman içinde bir şeyler yayarsınız. Sadece bir şeyi statik bir dizide gruplamak istiyorsanız, gözlenebilirler yanlış bir yaklaşımdır. Bir gözlemlenebilir koyun üzereler Eğer durumda

Eğer birkaç dats

const tasks = 
    [ {due: "2016-01-01"} 
    , {due: "2016-01-01"} 
    , {due: "2016-01-02"} 
    ]; 

sahip olması mümkündür ama bu dizi bir kez sadece çıkış alacaktı ve bu kadar.

const observable = Rx.Observable.of(tasks); 
observable.subscribe(x => console.log('All at once', x)); 
// output: All at once [ {due: "2016-01-01"}, {due: "2016-01-01"}, {due: "2016-01-02"} ]; 

zamanında bunları dağıtmak istiyorsanız - ve şimdi Gözlenebilirler için ne gittikçe yaklaşıyoruz - Asistan bu da

const observable2 = Rx.Observable.from(tasks); 
observable2.subscribe(x => console.log('One after the other', x)); 
// output: 'One after the other' {due: "2016-01-01"} 
//   'One after the other' {due: "2016-01-01"} 
//   'One after the other' {due: "2016-01-02"} 

yapmasını sağlayabilirsiniz en bir veri kaynağına sahip varsayalım o bir süre sonra yeni bir görev sağlıyor ve onları zaman içinde gruplamak istiyoruz. Gözlenebilirler doğru şey olabilir

const observable3 = Rx.Observable.from(tasks); 
observable3 
    .scan((acc, obj) => { 
    let oldValue = acc[obj.due] || 0; 
    acc[obj.due] = ++oldValue; 
    return acc; 
    }, {}) 
    .subscribe(x => console.log(x)); 
// output: { 2016-01-01: 1 } 
//   { 2016-01-01: 2 } 
//   { 2016-01-01: 2, 2016-01-02: 1 } 

Yani ihtiyaçlarınıza bağlı: Bu gibi görünmesini olacaktınız. Veriler zamanında dağıtılırsa, yukarıda gösterildiği gibi gruplamak mükemmel bir şekilde mümkündür. Onunla oynamak için uploaded the code to jsbin var.