AngularFire2 Firestore動的なクエリ：startTimeの== currentDateRange

Question

AngularFire2とFirestore

目標：Firestoreの動的クエリとトラブル：startTimeの== currentDateRange

質問Firestoreからクエリデータ。私はdocumentationを読んで、exampleを見ました。私はファイヤーストアにレッスン1（レッスン1、レッスン2、レッスン3など）を保存しています。それぞれにstarTime（タイムスタンプ）（2017年12月18日、2017年12月25日、2018年1月1日）があります。

私の目標は、自分のウェブページに自分の生徒のために与えられた週の現在のレッスン素材のみを表示させることです。毎週月曜日の00:00（日曜真夜中）から日曜日23:59、7日目の日付範囲まで週単位のレッスンが表示されます。

月曜日に新しい週が再び始まったとき、私はここにレッスン2 - 2017年12月25日の新しいレッスンを表示します。現在の日付を特定する方法に困惑し、現在の日に6日以上を加えたものです。

MySqlからFirestoreに移行します。まだ私にとって非常に外国人です。私がこれまでにやったことは、ほとんど成功していません。 Firestoreのデータ構造、TypeScriptファイル、およびHTMLのイメージ。

初めてStackOverflowに投稿した場合は、このガイドの正しいガイドラインに従ってください。何かお手伝いをしてくれてありがとう。

Firestoreデータ

Firestore Data Structure

TS

import { Component } from '@angular/core'; 
import { AngularFirestore, AngularFirestoreDocument, AngularFirestoreCollection } from 'angularfire2/firestore'; 
import { Observable } from 'rxjs/Observable'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 
import 'rxjs/add/operator/switchmap' 
import 'rxjs/add/observable/combineLatest'; 

export interface Week { 
    lesson: string; 
    startTime: Date; 
} 

@Component({ 
    selector: 'app-calendar', 
    templateUrl: './calendar.component.html', 
    styleUrls: ['./calendar.component.css'], 
}) 

export class CalendarComponent { 
    weeks: Observable<any[]>; 
    dateFilter: BehaviorSubject<string | null>; 
    currentDate: new Date(); 
    endDate: string;// need to figure out how to add seven days from currentDate 

    constructor(private afs: AngularFirestore) { 

    this.dateFilter = new BehaviorSubject(null); 
    this.weeks = Observable.combineLatest(
     this.dateFilter).switchMap(([startTime]) => afs.collection<Week>('weeks', ref => { 
     let query : firebase.firestore.CollectionReference | firebase.firestore.Query = ref; 
     if (startTime) { query = query.where('startTime', '=>', currentDate) }; 
     if (startTime) { query = query.where('startTime', '<', endDate) }; 
     return query; 
    }).valueChanges()); 
} 

HTML

  <ul *ngFor="let week of weeks | async"> 
     <li > 
      {{ week.lesson }} 
     </li> 
     <li> 
      {{ week.startTime }} 
     </li> 
     </ul> 

Answer 1

最も簡単な方法は次のとおりです。

endDate = startDate + 7*86400 // 7 days * 86400 ms in a day 

ちょうど日付を追加することの問題点は、うるう日を考慮していないです等をJavaScriptで日付を操作する

最良の方法は、moment.jsライブラリです。 以下は、日付を検証して（必要な場合）、終了日を取得するために1週間を追加する方法の例です。

if (!moment(this.activity.dates.startDate).isValid()) 
     this.activity.dates.startDate = moment().toISOString(); 
    if (!moment(this.activity.dates.endDate).isValid()) 
     this.activity.dates.endDate = moment().add(1, 'week').toISOString();