AngularFire2 Firestore动态查询:startTime == currentDateRange

问题描述 投票:1回答:1

AngularFire2和Firestore

目标:从Firestore查询数据,其中startTime == currentDateRange

问题:遇到Firestore中的动态查询问题。我读了documentation并看了提供的example。我每周上课都存放在我的火场,即(第1课,第2课,第3课等)。他们每人都有一个starTime(时间戳)(2017年12月18日,2017年12月25日,2018年1月1日)。

我的目标是让我的网页仅为我的学生显示给定周的当前课程材料。每周课程将在周一00:00(周日午夜)至周日23:59,七天日期范围内显示。

然后,当星期一再次开始新的一周时,我会在2017年12月25日的第2课 - 第2课 - 示例中显示新课程。难以理解如何识别当前日期,然后添加日期范围或当前日期加上再过六天。

从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>
typescript timestamp angularfire2 google-cloud-firestore
1个回答
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();
© www.soinside.com 2019 - 2024. All rights reserved.