Question

我正在以某种形式使用ng-bootstrap的日期/时间选择器。我试图实现此目的：

https://stackblitz.com/edit/angular-datetimepicker?file=src%2Fapp%2Fapp.component.html

在component.ts文件中出现以下错误：

Property 'year' does not exist on type 'string | NgbDateStruct'.
Property 'year' does not exist on type 'string'.

一个月又一天都一样，我也得到了：

Argument of type 'string | NgbDateStruct' is not assignable to parameter of type 'string'.
Type 'NgbDateStruct' is not assignable to type 'string'.

组件文件是：

import { Component, OnInit, Input, forwardRef, ViewChild, AfterViewInit, Injector } from '@angular/core';
import { NG_VALUE_ACCESSOR, ControlValueAccessor, NgControl } from '@angular/forms';
import { DatePipe } from '@angular/common';
import { DateTimeModel } from './date-time.model';
import { noop } from 'rxjs';
import { NgbDatepickerConfig, NgbCalendar, NgbDate, NgbPopoverConfig, NgbPopover, NgbDatepicker, NgbDateStruct, NgbTimeStruct} from '@ng-bootstrap/ng-bootstrap';


@Component({
  selector: 'app-date-time-picker',
  templateUrl: './date-time-picker.component.html',
  styleUrls: ['./date-time-picker.component.scss'],
  providers: [
    DatePipe,
    {
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() => DateTimePickerComponent),
        multi: true
    }
]
})
export class DateTimePickerComponent implements ControlValueAccessor, OnInit, AfterViewInit {
  @Input()
  dateString: string;

  @Input()
  inputDatetimeFormat = 'yyyy/MM/dd hh:mm:ss';
  @Input()
  hourStep = 1;
  @Input()
  minuteStep = 15;
  @Input()
  secondStep = 30;
  @Input()
  seconds = true;

  @Input()
  disabled = false;

  private showTimePickerToggle = false;

  private datetime: DateTimeModel = new DateTimeModel();
  private firstTimeAssign = true;

  @ViewChild(NgbDatepicker)
  private dp: NgbDatepicker;

  @ViewChild(NgbPopover)
  private popover: NgbPopover;

  private onTouched: () => void = noop;
  private onChange: (_: any) => void = noop;

  private ngControl: NgControl;

  constructor(private config: NgbPopoverConfig, private inj: Injector ) {
      config.autoClose = 'outside';
      config.placement = 'auto';
  }

  ngOnInit(): void {
      this.ngControl = this.inj.get(NgControl);
  }

  ngAfterViewInit(): void {
      this.popover.hidden.subscribe($event => {
          this.showTimePickerToggle = false;
      });
  }

  writeValue(newModel: string) {
      if (newModel) {
          this.datetime = Object.assign(this.datetime, DateTimeModel.fromLocalString(newModel));
          this.dateString = newModel;
          this.setDateStringModel();
      } else {
          this.datetime = new DateTimeModel();
      }
  }

  registerOnChange(fn: any): void {
      this.onChange = fn;
  }

  registerOnTouched(fn: any): void {
      this.onTouched = fn;
  }

  toggleDateTimeState($event) {
      this.showTimePickerToggle = !this.showTimePickerToggle;
      $event.stopPropagation();
  }

  setDisabledState?(isDisabled: boolean): void {
      this.disabled = isDisabled;
  }

  onInputChange($event: any) {
      const value = $event.target.value;
      const dt = DateTimeModel.fromLocalString(value);

      if (dt) {
          this.datetime = dt;
          this.setDateStringModel();
      } else if (value.trim() === '') {
          this.datetime = new DateTimeModel();
          this.dateString = '';
          this.onChange(this.dateString);
      } else {
            this.onChange(value);
      }
  }

  onDateChange($event: string | NgbDateStruct) {        
      if ($event.year){
        $event = `${$event.year}-${$event.month}-${$event.day}`
      }

      const date = DateTimeModel.fromLocalString($event);

      if (!date) {
          this.dateString = this.dateString;
          return;
      }

      if (!this.datetime) {
          this.datetime = date;
      }

      this.datetime.year = date.year;
      this.datetime.month = date.month;
      this.datetime.day = date.day;

      this.dp.navigateTo({ year: this.datetime.year, month: this.datetime.month });
      console.log(this.datetime);
      this.setDateStringModel();
  }

  onTimeChange(event: NgbTimeStruct) {
      this.datetime.hour = event.hour;
      this.datetime.minute = event.minute;
      this.datetime.second = event.second;

      this.setDateStringModel();
  }

  setDateStringModel() {
      this.dateString = this.datetime.toString();

      if (!this.firstTimeAssign) {
          this.onChange(this.dateString);
      } else {
          // Skip very first assignment to null done by Angular
          if (this.dateString !== null) {
              this.firstTimeAssign = false;
          }
      }
  }

  inputBlur($event) {
      this.onTouched();
  }
}

错误在这里：

onDateChange($event: string | NgbDateStruct) {        
      if ($event.year){
        $event = `${$event.year}-${$event.month}-${$event.day}`
      }

      const date = DateTimeModel.fromLocalString($event);

      if (!date) {
          this.dateString = this.dateString;
          return;
      }

任何想法都会很有帮助。谢谢

Answer 1

这只是类型错误。您可以尝试更改：

dateString: string;

为

dateString: string | NgbDateStruct;

Angular中的Ng-Bootstrap日期/时间选择器错误

1 个答案: