TypeError: Невозможно прочитать свойство 'bind' из неопределенного

Question

При попытке построить угловой проект я получаю ошибку ниже. Я объявил свои переменные вместе с методом для получения разных дат.

export class AuditComponent implements OnInit {

                minDate: string;
                maxDate: string;
                bsRangeValue: Date[] = [];

                constructor(){}

                ngOnInit() {}

                 getDateRange(evt: any) {
                        this.minDate = moment(this.bsRangeValue[0]).toISOString();
                        this.maxDate = moment(this.bsRangeValue[1]).toISOString();

                        this.auditPage = this.auditService
                            .getAuditEventEntries(0,
                                100,
                                this.userId,
                                this.auditQueryStr,
                                this.minDate,
                                this.maxDate);
                    }

 }

Как я называю диапазон дат

<li class="custom" (click)="drp.toggle()">
      div>Custom Range <span class="caret icon"></span></div> </li>

код шаблона

<input
 bsDaterangepicker
 #drp="bsDaterangepicker"
[(ngModel)]="bsRangeValue"
(ngModelChange)="getDateRange($event)">

AOT ERROR

ERROR TypeError: Cannot read property 'bind' of undefined
    at createClass (app.js?1516703022201:1)
    at createDirectiveInstance (app.js?1516703022201:1)
    at createViewNodes (app.js?1516703022201:1)
    at Object.createEmbeddedView (app.js?1516703022201:1)
    at TemplateRef_.createEmbeddedView (app.js?1516703022201:1)
    at ViewContainerRef_.createEmbeddedView (app.js?1516703022201:1)
    at NgIf._updateView (app.js?1516703022201:1)
    at NgIf.set [as ngIf] (app.js?1516703022201:1)
    at updateProp (app.js?1516703022201:1)
    at checkAndUpdateDirectiveInline (app.js?1516703022201:1)

Answer 1

Я думаю, что ваш bsRangeValue является пустым массивом, но вместо этого он должен содержать два Date ценности:

Например: https://valor-software.com/ngx-bootstrap/

составная часть:

import { Component } from '@angular/core';

@Component({
  selector: 'demo-date-picker-popup',
  templateUrl: './date-picker-popup.html'
})
export class DemoDatePickerPopupComponent {
  minDate = new Date(2017, 5, 10);
  maxDate = new Date(2018, 9, 15);

  bsValue: Date = new Date();
  bsRangeValue: any = [new Date(2017, 7, 4), new Date(2017, 7, 20)];
}

шаблон:

<div class="row">
  <div class="col-xs-12 col-12 col-md-4 form-group">
    <input class="form-control" #drp="bsDaterangepicker" bsDaterangepicker [(ngModel)]="bsRangeValue">
  </div>
  <div class="col-xs-12 col-12 col-md-3 form-group">
    <button class="btn btn-success" (click)="drp.toggle()">Date Range Picker</button>
  </div>
</div>