Angular 6-使用HttpParams +分页进行动态搜索

Question

这不是问题。我正在分享经过大量研究和测试后获得的知识。我使用角度6和HttpParams搜索了可选字段。我之所以这样分享是因为我搜索了很多内容，但搜索没有成功。

开发。 Env .： Angular 6.0.9，Spring Boot 2.0.7。

表格：

<form [formGroup]="searchForm" (ngSubmit)="submitSearch()">
<div class="row">
    <div class="col-md-1">
        <label>Código/Ano: </label>
    </div>
    <div class="col-md-2">
        <input type="text" class="form-control form-control-sm" id="inputCodigo" formControlName="codigo" placeholder="código" maxlength="10">
    </div>
    <div class="col-md-1">
        <input type="text" class="form-control form-control-sm" id="inputAno" formControlName="ano" placeholder="ano" maxlength="4">
    </div>
    <div class="col-md-1">
        <label>Período: </label>
    </div>
    <div class="col-md-2">            
            <input type="text" class="form-control form-control-sm" placeholder="de" onfocus="(this.type = 'date')" formControlName="dataInicio">            
    </div>
    <div class="col-md-2">
            <input type="text" class="form-control form-control-sm" placeholder="ate" onfocus="(this.type = 'date')" formControlName="dataFinal">            
    </div>
    <div class="col-md-1">
        <input class="btn btn-primary btn-sm" type="submit" value="Buscar">
    </div>
    <div class="col-md-2">
        <a [routerLink]="['/documentos/cadastro']" class="btn btn-sm btn-danger">Novo Documento</a>
    </div>

</div>

组件：

  export class DocumentosComponent implements OnInit {
  documentos: Documento[];
  searchForm: FormGroup;
  docFiltro: DocumentoSearch = new DocumentoSearch();

  constructor(
    private documentoService: DocumentoService,
    private fb: FormBuilder,
    private page: Page
  ) {}

  ngOnInit() {
    this.page.page = "0";
    this.createFormGroup();
    this.getDocumentosByFilter();
  }

  getDocumentosByFilter() {
    this.docFiltro = this.searchForm.value;

    let searchParams = this.createSearchParam(this.docFiltro);

    this.documentoService.findPage(searchParams).subscribe(
      data => {
        this.documentos = data["content"];
        this.page.pages = new Array(data["totalPages"]);
      },
      error => {
        console.log(error.error.message);
      }
    );
  }

  createSearchParam(docFiltro: DocumentoSearch): HttpParams {
    let searchParams = new HttpParams()

    searchParams = searchParams.set("page",this.page.page)

    if (
      docFiltro.codigo != null &&
      docFiltro.codigo != undefined &&
      docFiltro.codigo != ""
    ) {
      searchParams =   searchParams.set("codigo", docFiltro.codigo);
    }

    if (
      docFiltro.ano != null &&
      docFiltro.ano != undefined &&
      docFiltro.ano != ""
    ) {
      searchParams =   searchParams.set("ano", docFiltro.ano);
    }

    if (
      docFiltro.dataInicio != null &&
      docFiltro.dataInicio != undefined &&
      docFiltro.dataInicio != ""
    ) {
      searchParams =   searchParams.set("dataInicio", docFiltro.dataInicio);
    }

    if (
      docFiltro.dataFinal != null &&
      docFiltro.dataFinal != undefined &&
      docFiltro.dataFinal != ""
    ) {
      searchParams =   searchParams.set("dataFinal", docFiltro.dataFinal);
    }

    return searchParams;
  }

  setPage(i, event: any) {
    event.preventDefault();
    this.page.page = i;
    this.getDocumentosByFilter();
  }

  createFormGroup() {
    this.searchForm = this.fb.group({
      codigo: [""],
      ano: [""],
      dataInicio: [""],
      dataFinal: [""]
    });
  }

  submitSearch() {
    this.page.page = '0';
    this.getDocumentosByFilter();
  }
}

服务方法：

    findPage(searchParams: HttpParams) {

    return this.http.get<Documento[]>(`${API_URL}/sge/documento/search`, {params: searchParams});
  }