Bootstrap NgbDate 日期范围日历 - “TypeError：无法读取未定义的属性‘等于’”答案

【问题标题】：Bootstrap NgbDate Date Range Calendar - "TypeError: Cannot read property 'equals' of undefined"Bootstrap NgbDate 日期范围日历 - “TypeError：无法读取未定义的属性‘等于’”
【发布时间】：2020-02-03 02:58:28
【问题描述】：

我正在使用 Angular Bootstrap 创建一个日期范围选择器，尽管代码正是他们示例中的代码，但我得到了几个错误，所有错误都表明“TypeError: Cannot read property 'equals' of undefined”。

这是我的代码：https://stackblitz.com/angular/ggxrvppdjeq

唯一真正的区别是我从另一个文件夹导入NgbDate： import { NgbDate } from '@ng-bootstrap/ng-bootstrap/datepicker/ngb-date';

如果我尝试像示例中那样从@ng-bootstrap/ng-bootstrap 执行此操作，则会在 VSCode 中收到错误：node_modules/@ng-bootstrap/ng-bootstrap"' has no exported member。将其切换到我上面的内容会使错误消失......但这也许是导致问题的原因？

模板：

<ngb-datepicker #dp (select)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden">
</ngb-datepicker>

<ng-template #t let-date let-focused="focused">
  <span class="custom-day"
        [class.focused]="focused"
        [class.range]="isRange(date)"
        [class.faded]="isHovered(date) || isInside(date)"
        (mouseenter)="hoveredDate = date"
        (mouseleave)="hoveredDate = null">
    {{ date.day }}
  </span>
</ng-template>

<hr>

<pre>From: {{ fromDate | json }} </pre>
<pre>To: {{ toDate | json }} </pre>

组件：

import { Component, OnInit } from '@angular/core';
import { NgbCalendar } from '@ng-bootstrap/ng-bootstrap';
import { NgbDate } from '@ng-bootstrap/ng-bootstrap/datepicker/ngb-date';

@Component({
  selector: 'ngbd-datepicker-range',
  templateUrl: './datepicker-range.html',
  styles: [`
    .custom-day {
      text-align: center;
      padding: 0.185rem 0.25rem;
      display: inline-block;
      height: 2rem;
      width: 2rem;
    }
    .custom-day.focused {
      background-color: #e6e6e6;
    }
    .custom-day.range, .custom-day:hover {
      background-color: rgb(2, 117, 216);
      color: white;
    }
    .custom-day.faded {
      background-color: rgba(2, 117, 216, 0.5);
    }
  `]
})
export class NgbdDatepickerRange {

  hoveredDate: NgbDate;

  fromDate: NgbDate;
  toDate: NgbDate;

  constructor(calendar: NgbCalendar) {
    this.fromDate = calendar.getToday();
    this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
  }

  onDateSelection(date: NgbDate) {
    if (!this.fromDate && !this.toDate) {
      this.fromDate = date;
    } else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
      this.toDate = date;
    } else {
      this.toDate = null;
      this.fromDate = date;
    }
  }

  isHovered(date: NgbDate) {
    return this.fromDate && !this.toDate && this.hoveredDate && date.after(this.fromDate) && date.before(this.hoveredDate);
  }

  isInside(date: NgbDate) {
    return date.after(this.fromDate) && date.before(this.toDate);
  }

  isRange(date: NgbDate) {
    return date.equals(this.fromDate) || date.equals(this.toDate) || this.isInside(date) || this.isHovered(date);
  }
}

我能够在一个外部项目中成功实现这一点，但是当我插入这个现有项目时，我遇到了问题。任何帮助将不胜感激，我无法弄清楚。

【问题讨论】：

可能您需要查看 version1.* fo ng-bootstrap 的文档。 github.com/ng-bootstrap/ng-bootstrap/blob/1_1_maintanance/demo/…

标签： angular

【解决方案1】：

这只是他们官方文档中的一个错字问题。在 ng-template 中，日期没有作为输入传递，这就是它产生未定义错误的原因。

<ng-template #t let-date let-focused="focused">

把这个改成

<ng-template #t let-date="date" let-focused="focused">

【讨论】：

【解决方案2】：

我认为问题是您使用的 ng-bootstrap 版本与您的角度版本不兼容。你可以找到兼容的here。

对于 Angular 6，我使用了 3.3.1 版本。这是命令：

npm install --save @ng-bootstrap/ng-bootstrap@3.3.1

【讨论】：