Angular：列表查询条件上的日期字段的格式转化（转换成yyyy-MM-dd）

今天发现列表上面带有日期格式的查询条件的页面，每次带有查询条件查询都会有点问题，表现在第一次对某个日期进行格式转换（转换成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就是我们用到的局域变量，这样每次调接口都能保证我们转换的日期的来源是原始的格式了。