[英]Old value kept on ngModel change
Dealing with a table which need a filter by data, I've created the following screen:处理需要按数据过滤的表,我创建了以下屏幕:
What I need is to remove values outside the date start criteria of the filter so I've done this on my EsightComponent
:我需要的是删除过滤器的日期开始条件之外的值,所以我已经在我的
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;
});
}
And this is my view:这是我的观点:
<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>
Based on tho way data binding principle, this.startDateFilter
should catch changes on it, but it doesn't.基于tho way数据绑定原则,
this.startDateFilter
应该捕捉它的变化,但它没有。 If I select a date on the calendar, it always displays the previous value, not the selected new one.如果我在日历上选择一个日期,它总是显示以前的值,而不是选择的新值。 That is seen on
console.log(this.startDateFilter)
line.这可以在
console.log(this.startDateFilter)
行上看到。
I've checked I could use ngOnChanges
to catch changes and to have access to both old and new values, but this hook just works for @Input()
values and this is not my case.我已经检查过我可以使用
ngOnChanges
来捕获更改并访问旧值和新值,但是这个钩子只适用于@Input()
值,这不是我的情况。
I wish to retrieve the value selected by the user and not an old one.我希望检索用户选择的值而不是旧值。
Thanks.谢谢。
It's happens because ngModel triggers after change datection, but you are watching for blur, that fires before detection发生这种情况是因为 ngModel 在更改日期后触发,但您正在观察模糊,在检测之前触发
You should getting current value from $event, not from model value.您应该从 $event 中获取当前值,而不是从模型值中获取。 Something line
东西线
$event.value
基于 DmitriyKhirniy 的回答(非常感谢!!!),最终有效的是:
$event.target.value
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.