Question

我试图选择一个带有ngbDatepicker的日期，然后将通过httpClient的年，月和日期值发送到我的后端，以根据该日期过滤称为“显示”的实体页面。后端采用了整数作为参数的“年”，“月”和“天”。

我当前的问题是：

如果没有选择日期，则可以正确获取所有元素，但是如果在日期选择器中选择任何日期，则始终会得到一个空列表。如果无论在何处选择了哪种格式，都可以在httpClient参数中对年份，月份和日期进行硬编码，则可以得到正确过滤的列表，因此我认为如何处理日期选择器中的日期存在问题。

.html文件中的日期选择器实现：

<!-- other code -->
<form class="form-inline">
        <div class="form-group">
          <div class="input-group">
            <input class="form-control" placeholder="yyyy-mm-dd"
                   name="dp" ref-selectedDate ngbDatepicker #d="ngbDatepicker" id="picker">
            <div class="input-group-append">
              <button class="btn btn-outline-secondary calendar" (click)="d.toggle()" type="button"></button>
            </div>
          </div>
        </div>
      </form>
<!-- other code -->
<button (click)="search(selectedDate.value)" type="button" class="btn btn-success"><i class="fas fa-search"></i> Suchen </button>
<!-- other code -->

.ts文件中的搜索功能：

// other code
private search(selectedDate: Date) {
    this.shows = [];
    this.eventService.getShowPage(this.event.id, selectedDate, this.page, this.pageSize).subscribe(
      (page: Page<Show>) => {
        this.processShowResponse(page.content);
        this.shows = page.content;
        this.totalItems = page.totalElements;
      },
      error => {
        this.defaultServiceErrorHandling(error);
      }
    );
  }
// other code

还有我的服务等级：

// other code
getShowPage(eventId: number, searchDate: Date, page: number = 1, size: number = 25): Observable<Page<Show>> {
    this.log('Load shows of event with id ' + eventId + ' on page ' + page);
    let params = new HttpParams().set('page', (page - 1).toString()).set('size', size.toString());
    const url = this.eventBaseUri + '/' + eventId + this.showsUri;

    if (searchDate) {
      params = params.set('year', searchDate.getFullYear().toString());
      params = params.set('month', searchDate.getMonth().toString());
      params = params.set('day',  searchDate.getDate().toString());
    }
    return this.httpClient.get<Page<Show>>(url, {params: params})
      .pipe(map(resp => {
        resp.number++;
        return resp;
      }));
  }
// other code

Answer 1

我发现问题出在日期选择器中的值具有“ yyyy-mm-dd”格式，无法自动转换为Date。

我通过添加以下内容对其进行了修复：

const splitDate = selectedDate.split('-');
year = Number(splitDate[0]);
month = Number(splitDate[1]);
day = Number(splitDate[2]);
searchDate = new Date(year, month, day, 0, 0, 0, 0);

到component.ts

如何从ngbDatepicker中提取年，月和日期以通过httpClient发送

1 个答案: