Question

使用Angular 7，我有一个firebase路径，我想根据有角度材质的日期选择器选择的日期进行更改。 datePicker中的值存储到我的databaseService中，然后传递到组件中。我在NgOnIt中拥有路径，因为我使用了来自routeParamMap的uid值来拥有它。我相信，初始化的生命周期挂钩会阻止其更改。无论如何，这可以做到吗？我用HostListener给了它一个镜头，但是没有用，所以我将其删除了，可惜。

import { Component, ElementRef, NgModule, NgZone, OnInit, ViewChild, Input, Output, EventEmitter } from '@angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { AngularFireDatabase } from '@angular/fire/database';
import { Observable } from 'rxjs';
import { ActivatedRoute } from '@angular/router';
import {
  DateAdapter,
  NativeDateAdapter,
  MAT_DATE_FORMATS,
  MAT_DATE_LOCALE
  } from "@angular/material/core";

import * as moment from "moment";

import { DatabaseService } from 'src/app/database.service'

const CUSTOM_DATE_FORMATS = {
  parse: {
    dateInput: { month: "short", year: "numeric", day: "numeric" }
  },
  display: {
    dateInput: "input",
    monthYearLabel: { year: "numeric", month: "short" },
    dateA11yLabel: { year: "numeric", month: "long", day: "numeric" },
    monthYearA11yLabel: { year: "numeric", month: "long" }
  }
};
const dateFormat = "DD-MM-YY";

class AppDateAdapter extends NativeDateAdapter {
format(date: Date, displayFormat: Object): string {
if (displayFormat === "input") {
  return moment(date).format(dateFormat);
} else {
  return date.toDateString();
}}}    

export class HistoryComponent implements OnInit {

  get data(): string {return this.databaseService.serviceData;}

  set data(date) {this.databaseService.serviceData=moment(date).format(dateFormat));} 
  snaps: Observable<any[]>;
  tinfo: Observable<any[]>;
  uid: string;

  @Input() placeholder;
  @Output() onFilter: EventEmitter<any> = new EventEmitter<any>();
  @Input() selectedValue;
  @Output() selectedValueChange: EventEmitter<any> = new EventEmitter<any>();

  constructor(
    private db: AngularFireDatabase,
    private ngZone: NgZone,
    private afs: AngularFirestore,
    public databaseService: DatabaseService,
    private route: ActivatedRoute
  ){ this.tinfo = db.list('tinfos').valueChanges(); }

  backClicked() {
    this._location.back();}

  ngOnInit() {    
    this.route.paramMap
      .subscribe(params => {
        this.uid = params.get('uid');
        this.snaps = db.list('snapity-tests/'+this.databaseService.serviceData+'/'+ this.uid).valueChanges();   
  })

  onChange($event) {
    this.selectedValue = this.updateDate($event.value);
    this.onFilter.emit(this.data);
  }

  updateDate(date) {
    let formatedDate;
    if (date !== undefined) {
      formatedDate = moment(date).format(dateFormat);      
    }    
    this.selectedValueChange.emit(formatedDate);  
    return formatedDate;   
  }

}}

这是我的component.html

<body>
<div class="top-bar">
    <button mat-icon-button class="back-button" (click)="backClicked()"><img class="back-button-icon" src=".././assets/images/baseline_arrow_back_white_48dp.png"></button>    
    <span class="user-support support-button jss37 jss11 jss13 jss34">SUPPORT</span>      
</div>

<div class="place-line">
        <mat-form-field class="datepicker">
                <input matInput [matDatepicker]="picker" [(ngModel)]= data>
                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                <mat-datepicker touchUi #picker></mat-datepicker>
            </mat-form-field>
            <div *ngFor="let info of snaps | async" >{{info.snapitytests}}</div>
    <div class="header">                    
        <div>
            <!---<div class="card">-->
            <div *ngFor="let mi of tinfo | async" style="list-style-type: none">
                <mat-card>
                    <mat-card-header>
                        <mat-card-title>
                            Name: {{ mi.name }}
                        </mat-card-title>
                        <mat-card-subtitle>{{data}}</mat-card-subtitle>
                    </mat-card-header>
                    <mat-card-content>
                        <li class="li-no">No: {{ mi.li_no}}</li>
                        <li class="li-do"></li>
                        <li class="stime">Start Time: {{ mi.stime }}</li>
                        <li class="etime">End Time: {{ mi.etime }}</li>
                        <li class="count">Off Alert Count:</li>                                 
                    </mat-card-content>
                </mat-card>
            </div>
            <!--</div>-->
        </div>  

    </div>

</div>
</body>

Answer 1

您必须确保您的参数uid不是未定义的。

import { Component, ElementRef, NgModule, NgZone, OnInit, ViewChild, Input, Output, EventEmitter } from '@angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from "@angular/forms";
import { BrowserModule } from "@angular/platform-browser";
import { AngularFireDatabase } from '@angular/fire/database';
import { Observable, Subscription } from 'rxjs';
import { ActivatedRoute } from '@angular/router';
import {
  DateAdapter,
  NativeDateAdapter,
  MAT_DATE_FORMATS,
  MAT_DATE_LOCALE
  } from "@angular/material/core";

import * as moment from "moment";

import { DatabaseService } from 'src/app/database.service'

const CUSTOM_DATE_FORMATS = {
  parse: {
    dateInput: { month: "short", year: "numeric", day: "numeric" }
  },
  display: {
    dateInput: "input",
    monthYearLabel: { year: "numeric", month: "short" },
    dateA11yLabel: { year: "numeric", month: "long", day: "numeric" },
    monthYearA11yLabel: { year: "numeric", month: "long" }
  }
};
const dateFormat = "DD-MM-YY";

class AppDateAdapter extends NativeDateAdapter {
format(date: Date, displayFormat: Object): string {
if (displayFormat === "input") {
  return moment(date).format(dateFormat);
} else {
  return date.toDateString();
}}}    

export class HistoryComponent implements OnInit, OnDestroy {

  get data(): string {return this.databaseService.serviceData;}

  set data(date) {this.databaseService.serviceData=moment(date).format(dateFormat));} 
  snaps: Observable<any[]>;
  uid: string;

  @Input() placeholder;
  @Output() onFilter: EventEmitter<any> = new EventEmitter<any>();
  @Input() selectedValue;
  @Output() selectedValueChange: EventEmitter<any> = new EventEmitter<any>();
  routeSub: Subscription;
  constructor(
    private db: AngularFireDatabase,
    private ngZone: NgZone,
    private afs: AngularFirestore,
    public databaseService: DatabaseService,
    private route: ActivatedRoute
  ){ }

  ngOnInit() {    
     this.routeSub =  this.route.params
          .subscribe(params => {
            this.uid = params('uid');
            this.snaps = db.list(`snapity-tests/${this.databaseService.serviceData}/${this.uid}`).valueChanges();   
      })
    }

ngOnDestroy(){
  if(this.routeSub){
      this.routeSub.unsubscribe();
  }
}
  onChange($event) {
    this.selectedValue = this.updateDate($event.value);
    this.onFilter.emit(this.data);
  }

  updateDate(date) {
    let formatedDate;
    if (date !== undefined) {
      formatedDate = moment(date).format(dateFormat);      
    }    
    this.selectedValueChange.emit(formatedDate);  
    return formatedDate;   
  }

}}

我看到您有this.databaseService.serviceData，但找不到您的构造函数中定义的任何this.databaseService，并且不确定serviceData的末尾是什么。

firebase路径应为string，除非this.databaseService.serviceData是返回string的变量，否则我怀疑您会从firebase获得任何东西。因此，您的路径无效。

在NgOnIt之后动态更改Angular Firebase路径

1 个答案: