保留在ngModel上的旧值更改

Question

处理需要按数据过滤的表格，我创建了以下屏幕：

我需要的是删除过滤器日期开始条件之外的值，以便我在 EsightComponent 上执行此操作：

startDateChange($event, dt, col) {
  this.loading = true;
  this.eSightEndSubscription = this.eSightService.getByContractId(this.contractId).subscribe(
    res => {
      const filterResults = this.reads.filter((read) => {
        const iteratorDate = new Date(20 + read.timestamp.slice(-2), read.timestamp.slice(0, 2) - 1, 1);
        console.log(this.startDateFilter);
        return iteratorDate <= this.startDateFilter;
      }, this);

      this.processRightAnswer(filterResults);
    },
    error => {
      console.log('ERROR');
    },
    () => {
      this.loading = false;
    });
}

这是我的观点：

<h4>Lecturas eSight <small>contrato {{ contractId }}</small></h4>

<p-calendar dateFormat="mm/yy" [(ngModel)]="startDateFilter" (onBlur)="startDateChange($event, dt, col)"></p-calendar>
<p-calendar [(ngModel)]="endDateFilter" (change)="startDateChange($event, dt, col)"></p-calendar>

<p-dataTable [value]="reads" [rows]="30" [paginator]="true" [loading]="loading" selectionMode="single" scrollable="true" #dt>
  <ng-container *ngFor="let col of cols; let i = index;">
    <p-column [field]="col.field" [header]="col.header" *ngIf="i === 0" [style]="{ 'width': '170px' }">
    </p-column>
    <p-column [field]="col.field" [header]="col.header" *ngIf="col.header.length <= 10" [style]="{ 'width': '55px' }"></p-column>
    <p-column [field]="col.field" [header]="col.header" *ngIf="col.header.length > 10" [style]="{ 'width': '170px' }"></p-column>
  </ng-container>
</p-dataTable>

<button class="btn btn-warning" (click)="onReturn()">Atrás</button>

基于数据绑定原则，this.startDateFilter应该捕获它的变化，但它并没有。如果我在日历上选择日期，它始终显示先前的值，而不是选定的新值。这可以在console.log(this.startDateFilter)行看到。

我已经检查过我可以使用ngOnChanges来捕获更改并访问旧值和新值，但此挂钩仅适用于@Input()值，这不是我的情况。

我希望检索用户选择的值而不是旧值。

感谢。

Answer 1

这是因为ngModel在更改日期后触发，但您正在观察模糊，在检测之前触发

您应该从$ event获取当前值，而不是从模型值获取。 有点行

$event.value

Answer 2

根据DmitriyKhirniy的回答（非常感谢!!!），最终有效的是：

$ event.target.vale