[英]Old value kept on ngModel change
处理需要按数据过滤的表,我创建了以下屏幕:
我需要的是删除过滤器的日期开始条件之外的值,所以我已经在我的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>
基于tho way数据绑定原则, this.startDateFilter
应该捕捉它的变化,但它没有。 如果我在日历上选择一个日期,它总是显示以前的值,而不是选择的新值。 这可以在console.log(this.startDateFilter)
行上看到。
我已经检查过我可以使用ngOnChanges
来捕获更改并访问旧值和新值,但是这个钩子只适用于@Input()
值,这不是我的情况。
我希望检索用户选择的值而不是旧值。
谢谢。
发生这种情况是因为 ngModel 在更改日期后触发,但您正在观察模糊,在检测之前触发
您应该从 $event 中获取当前值,而不是从模型值中获取。 东西线
$event.value
基于 DmitriyKhirniy 的回答(非常感谢!!!),最终有效的是:
$event.target.value
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.