今天发现列表上面带有日期格式的查询条件的页面,每次带有查询条件查询都会有点问题,表现在第一次对某个日期进行格式转换(转换成yyyy-MM-dd格式)后,不改变日期,再次带这个日期查询列表,由于之前已经转换成了yyyy-MM-dd格式,所以这里再次转换就会报错,修改前的代码:
HTML:
<nz-form-control *ngIf="control.type === 'date' && control.label ==='审批单开始日期'">
<nz-date-picker formControlName="releaseBeginDate" [nzFormat]="'yyyy-MM-dd'"
nzPlaceHolder="请选择审批单开始日期">
</nz-date-picker>
</nz-form-control>
component.ts:
/**
* 查询数据
*/
searchData(reset: boolean = false): void {
if (reset) {
this.pageIndex = 1;
}
this.loading = true;
const searchCondition = this.searchForm.value;
// 格式化日期
if (!!searchCondition.releaseBeginDate) {
searchCondition.releaseBeginDate = this.dateUtil.formatDate(searchCondition.releaseBeginDate); // 日期格式化
}
this.ManagementAddProvider.getDataPageList(this.pageIndex, this.pageSize, this.sortKey,
this.sortValue, searchCondition).subscribe(data => {
if (!helpers.IsEmpty(data)) {
this.total = data['total'];
this.dataSet = data['records'];
searchCondition.releaseBeginDate = null;
this.scrollValue.y = this.dataSet.length * 74 + 'px';
this.editCache = [];
this.dataSet.forEach(item => {
this.editCache.push({
edit: false,
data: item
});
});
}
this.loading = false;
}, err => {
this.notice.error('数据加载失败!');
this.loading = false;
});
}
这里注意searchCondition.releaseBeginDate = null;这一行,这里当时是因为第一次格式转换之后,如果再次调用这个searchData方法,那么日期格式会在yyyy-MM-dd的基础上再次进行格式转换,这样就会报错。所以这里我当时不得已将其清空,但是这样就无法正常使用了,因为日期实际上从searchForm这个表单删掉了,这样即使页面上还显示了这个日期,但是实际上这个日期字段已经不往后台传输了。
这样肯定是不行的,那到底怎么转换日期才能正常使用呢?
下面提供两种方法:
方法一:将日期格式转换的方法绑定在页面上,每次修改日期都格式化一次,否则不再转换日期格式:
HTML:
<nz-form-control *ngIf="control.type === 'date' && control.label ==='审批单开始日期'">
<nz-date-picker formControlName="releaseBeginDate" [nzFormat]="'yyyy-MM-dd'"
nzPlaceHolder="请选择审批单开始日期" (ngModelChange)="onDataChange($event)">
</nz-date-picker>
</nz-form-control>
注意这里绑定了格式转换的方法(ngModelChange)="onDataChange($event)"
component.ts:
onDataChange(event) {
if (!helpers.IsEmpty(event)) {
this.searchForm.controls['releaseBeginDate'].setValue(this.dateUtil.formatDate(event));
} else {
this.searchForm.controls['releaseBeginDate'].setValue(null);
}
}
/**
* 查询数据
*/
searchData(reset: boolean = false): void {
if (reset) {
this.pageIndex = 1;
}
this.loading = true;
const searchCondition = this.searchForm.value;
this.ManagementAddProvider.getDataPageList(this.pageIndex, this.pageSize, this.sortKey,
this.sortValue, searchCondition).subscribe(data => {
if (!helpers.IsEmpty(data)) {
this.total = data['total'];
this.dataSet = data['records'];
this.scrollValue.y = this.dataSet.length * 74 + 'px';
this.editCache = [];
this.dataSet.forEach(item => {
this.editCache.push({
edit: false,
data: item
});
});
}
this.loading = false;
}, err => {
this.notice.error('数据加载失败!');
this.loading = false;
});
}
方法二:在component.ts文件上,查询列表的方法中定义一个局域变量用于存放转换前的日期,这样每次调用这个方法的时候,都会将原始的转换前的日期重新转换格式
searchData(reset: boolean = false): void {
if (reset) {
this.pageIndex = 1;
}
let dateFrom = '', dateTo = '';
const startDate = this.searchForm.controls['dateFrom'].value;
const endDate = this.searchForm.controls['dateTo'].value;
if (startDate != null && startDate != '') {
dateFrom = this.dateUtil.formatDate(startDate);
}
if (endDate != null && endDate != '') {
dateTo = this.dateUtil.formatDate(endDate);
}
const params = {
..... // 其他查询条件
startDate: dateFrom,
endDate: dateTo,
};
this.loading = true;
this.purAsnProvider.getDataPageList(this.pageIndex, this.pageSize, this.sortKey, this.sortValue,
params).subscribe(data => {
this.total = data['total'];
this.dataSet = data['records'];
this.loading = false;
this.refreshStatus();
this.scrollValue.y = this.dataSet.length * 50 + 'px';
}, err => {
this.loading = false;
this.notice.error('数据加载失败!');
this.dataSet = [];
this.total = 0;
});
}
这里const startDate和const endDate就是我们用到的局域变量,这样每次调接口都能保证我们转换的日期的来源是原始的格式了。