Angular2 Firebaseデータグループ

Question

私は新しいグループごとにヘッダを持つデータを繰り返していきたいと思います。私のデータモデルは

{ 
    "-K_kNx9_F2-eTul8548y": { 
    "title": "Registration", 
    "startTime": "2017-02-04T08:00-06:00" 
    }, 
    "-K_kQhBAJFTYEEqaXDp_": { 
    "room": "Cafeteria", 
    "startTime": "2017-02-04T12:00-06:00", 
    "title": "Lunch", 
    "track": "all" 
    }, 
    ... 
} 

非常に簡単ですし、私は現在の場所で解決策を持っていますが、それはすべてのタイムスロットのためのngForを行い、その後、皮革

<div *ngFor="**magic happens**"> 
    <h2>{{time.label}}</h2> 
    <div *ngFor="let session of schedule | async"> 
    {{session.title}} 
    </div> 
</div> 

のようなdiv要素を持っているのが大好きです時間が等しくないセッション

[隠さ] = "！（session.startTime == time.time）"

しかし、それはklunkyと遠くperfomantからです。私はまた、AngularFireで繰り返しクエリを検索することはできません。言っておいて、開始時間のリストがあったら、再帰的にFirebaseに問い合わせることができました。それはうまくいくが、物事ではないようだ？現在、私のコンストラクタは、あなたがこのような何かを行うことによって、それぞれの時間のために個々のクエリを実行するために実装を変更する可能性も非常にシンプル

export class ScheduleComponent {  
    schedule; 
    times; 
    constructor(public af: AngularFire) { 
     this.schedule = af.database.list(PATH + '/schedule', { query: { orderByChild: 'title'} }); 
     this.times = af.database.list(PATH + "/scheduletimes"); 
    } 

} 

Answer 1

です：

import 'rxjs/add/operator/do'; 
import 'rxjs/add/operator/map'; 

export class ScheduleComponent { 

    times; 
    timesWithSchedules; 

    constructor(public af: AngularFire) { 

     // A list of times, as per your the code in your question: 

     this.times = af.database.list(PATH + '/scheduletimes'); 

     // Compose an observable that adds the schedule for each time. Each 
     // emitted value will be an array of time entries. Enumerate the array 
     // and add an observable for the time's schedule: 

     this.timesWithSchedules = this.times.do(times => times.forEach(time => { 

      time.schedule = af.database 

       // Query the schedule entries that correspond the time: 

       .list(PATH + '/schedule', { 
        query: { 
         orderByChild: 'startTime' 
         startAt: time.time, 
         endAt: time.time 
        } 
       }) 

       // Sort the emmitted array of sessions by title: 

       .map(schedule => schedule.sort(compareTitles)); 

       function compareTitles(a, b) { 
        if (a.title < b.title) { 
         return -1; 
        } 
        if (a.title > b.title) { 
         return 1; 
        } 
        return 0; 
       } 
     })); 
    } 
} 

あなたのテンプレートは次のようになります。

<div *ngFor="let time of timesWithSchedules | async"> 
    <h2>{{time.label}}</h2> 
    <div *ngFor="let session of time.schedule | async"> 
    {{session.title}} 
    </div> 
</div>