typescript 使用后端查询参数分页

我正在创建一个表格，有角材料15，我面临着以下困难，搜索所有客户的方法是通过url示例接收搜索参数

/filter/general?quantidadePorPage=10&pagina=${o.pagina}&nmCliente= ${o.filtro.nmCliente}&nmFantasia=&dtCadastro=&tpSituacao=

我面临的另一个问题是，使每页的项目数分页内容的输入被定义为第一个值的5，最多10和20。然而，当我点击下一页按钮，它应该给我带来的5个缺失的项目，但他跳转到第2页，带来新的项目。
html =

<mat-form-field *ngIf="filtro !== ''; else filtroNotSelected">
  <mat-label>Filtro</mat-label>
  <input matInput (input)="applyFilter($event)" #input />
</mat-form-field>

<ng-template #filtroNotSelected>
  <mat-form-field>
    <mat-label>Selecione um filtro para pesquisar</mat-label>
    <input class="input-filtro" matInput disabled />
  </mat-form-field>
</ng-template>

<mat-form-field style="width: 15%">
  <mat-label>Ordenar Por: </mat-label>
  <mat-select (selectionChange)="ordenarTabela($event.value)">
    <mat-option value="nome">Razão Social</mat-option>
    <mat-option value="data_cadastro">Data de Cadastro</mat-option>
    <mat-option value="codigo">Código</mat-option>
  </mat-select>
</mat-form-field>

<input
  #input
  class="input-radio"
  type="radio"
  name="age"
  value="1"
  checked
  (change)="filtraAtivos($event)"
/>
<label for="age"> Ativos </label>
<input class="radio1" type="radio" name="age" value="2" />
<label for="age"> Inativos </label>
<input class="radio2" type="radio" name="age" value="30" />
<label for="age"> Todos </label>

<div class="div-principal mat-elevation-z8">
  <mat-table id="tabela-clientes" [dataSource]="dataSource" matSort>
    <!-- ID Column -->
    <ng-container matColumnDef="codigo">
      <mat-header-cell *matHeaderCellDef mat-sort-header>
        Código
      </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{ row.id }} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="data_cadastro">
      <mat-header-cell
        *matHeaderCellDef
        mat-sort-header
        style="justify-content: start"
      >
        Data de Cadastro
      </mat-header-cell>
      <mat-cell *matCellDef="let row">
        {{ row.createdAt | date : "dd/MM/yyyy" }}
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="nome">
      <mat-header-cell *matHeaderCellDef mat-sort-header>
        Razão Social
      </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{ row.nmCliente }} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="nome_fantasia">
      <mat-header-cell *matHeaderCellDef mat-sort-header>
        Nome Fantasia
      </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{ row.nmFantasia }} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="cidade">
      <mat-header-cell *matHeaderCellDef mat-sort-header>
        Cidade
      </mat-header-cell>
      <mat-cell *matCellDef="let row"> {{ row.localidade }} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="uf">
      <mat-header-cell
        *matHeaderCellDef
        mat-sort-header
        style="justify-content: center"
      >
        UF
      </mat-header-cell>
      <mat-cell *matCellDef="let row">
        <div class="row-uf">
          {{ row.uf }}
        </div>
      </mat-cell>
    </ng-container>

    <ng-container matColumnDef="situacao">
      <mat-header-cell
        *matHeaderCellDef
        mat-sort-header
        style="justify-content: center"
      >
        Situação
      </mat-header-cell>
      <mat-cell *matCellDef="let row">
        <div class="row-situacao">
          {{ row.tpSituacao == "1" ? "Ativo" : "Inativo" }}
        </div>
      </mat-cell>
    </ng-container>

    <!-- Botões de Ações -->
    <ng-container matColumnDef="acoes">
      <mat-header-cell
        *matHeaderCellDef
        mat-sort-header
        style="justify-content: end; margin-right: 0.5%"
      >
        Ações
      </mat-header-cell>
      <mat-cell *matCellDef="let row">
        {{ row.acoes }}
        <div class="botoes-acoes">
          <button
            mat-icon-button
            style="color: #ff6600"
            (click)="openDialog(row.id)"
          >
            <mat-icon>edit_note</mat-icon>
          </button>
          <button
            mat-icon-button
            color="warn"
            (click)="openDeleteDialog(row.id)"
          >
            <mat-icon>delete</mat-icon>
          </button>
        </div>
      </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>

    <!-- Row shown when there is no matching data. -->
    <tr class="mat-row" *matNoDataRow>
      <td class="mat-cell" colspan="4">Nada foi encontrado.</td>
    </tr>
  </mat-table>

  <mat-paginator
    [length]="totalRows"
    [pageSizeOptions]="pageSizeOptions"
    (page)="pageChanged($event)"
    showFirstLastButtons
    aria-label="Select page of users"
    #paginator
  >
  </mat-paginator>
</div>

等级ts =

export class DadosComponent implements OnInit, AfterViewInit {
  changes = new Subject<void>();
  public dataSubject = new Subject<[]>();
  data!: [];
  pagina: number = 1;
  quantidadePorPagina: number = 10;

  isLoading = false;
  totalRows = 0;
  pageSizeOptions: number[] = [5, 10, 20];

  updateData(newData: []) {
    this.data = newData;
    this.dataSubject.next(this.data);
  }

  @Input() filtro: string = '';

  
  clienteToBeDeleted!: number;

  
  displayedColumns: string[] = [
    'codigo',
    'data_cadastro',
    'nome',
    'nome_fantasia',
    'cidade',
    'uf',
    'situacao',
    'acoes',
  ];

  
  dataSource: MatTableDataSource<Cliente> = new MatTableDataSource();

  
  @ViewChild(MatSort) sort!: MatSort;
  @ViewChild(MatPaginator) paginator!: MatPaginator;

  allClientes: Cliente[] = [];
  clientes: Cliente[] = [];
  clientesFiltrados: Cliente[] = [];
  filtroAtivos = '1';

  constructor(
    private clientesService: ClientesService,
    public dialog: MatDialog,
    public deleteDialog: MatDialog
  ) {}

  ngOnInit(): void {
    this.clientesService
      .getAll({
        pagina: this.pagina,
        quantidadePorPagina: this.quantidadePorPagina,
        filtro: {nmCliente: ''}
      })
      .subscribe((clientes) => {
        console.log(clientes);
        this.allClientes = clientes;
        this.clientes = clientes;
        this.dataSource.data = clientes;
      });

      //this.loadData();
  }

  pageChanged(event: PageEvent) {
    console.log({ event });
    this.quantidadePorPagina = event.pageSize;
    this.pagina = event.pageIndex + 1;
    console.log(this.pagina);

    this.clientesService
      .getAll({
        pagina: this.pagina,
        quantidadePorPagina: this.quantidadePorPagina,
        filtro: {nmCliente: ''}
      })
      .subscribe((clientes) => {
        console.log(clientes);
        this.allClientes = clientes;
        setTimeout(() => {
          this.clientes = clientes;
          this.dataSource.data = clientes;
        });
      });
  }

客户服务=

getAll(o={pagina: 1, quantidadePorPagina: 10, filtro: {nmCliente: ''}}): Observable<Cliente[]> {

let headers = new HttpHeaders()
return this.http.get<Cliente[]>
(`${this.apiUrl}/filtro/geral?quantidadePorPagina=10&pagina=${o.pagina}&nmCliente=${o.filtro.nmCliente}&nmFantasia=&dtCadastro=&tpSituacao=`,
{ headers }).pipe(catchError(this.handleError));
}

对葡萄牙语的内容和变量表示抱歉

我遵循了一些教程，但事实证明，它并没有带我走得更远，什么帮助我最多的是这一个：https://www.freakyjolly.com/angular-material-12-server-side-table-pagination-example/

我这样做，它的工作，我在葡萄牙语：超文本标记语言

<div class="paginator">
    <div class="max-itens">
      <span>Itens por página: </span>
      <select
        class="seletor-itens"
        [(ngModel)]="quantidadePorPagina"
        (change)="carregaCliente()">
        <option value="5">5</option>
        <option value="10">10</option>
        <option value="20">20</option>
      </select>
    </div>
    <button mat-stroked-button class="btn-anterior" (click)="anterior()">
      <mat-icon>keyboard_arrow_left</mat-icon>
    </button>
    <button mat-stroked-button class="btn-proximo" (click)="proximo()">
      <mat-icon>keyboard_arrow_right</mat-icon>
    </button>
  </div>

测试：

pagina = 1;
  quantidadePorPagina = 10;
  primeiroItem = 0;
  ultimoItem = 0;
  totalItens = 0;

ngOnInit(): void {
    this.clientesService
      .getAll({
        pagina: this.pagina,
        quantidadePorPagina: this.quantidadePorPagina,
        filtro: { nmCliente: '' },
      })
      .subscribe((clientes) => {
        console.log(clientes);
        this.allClientes = clientes;
        this.clientes = clientes;
        this.dataSource.data = clientes;
      });

    this.carregaCliente();

    this.clientesService.getAll().subscribe((clientes) => {
      this.allClientes = clientes;
      this.filtrarClientes();
    });
  }

public anterior() {
    if (this.pagina > 1) {
      this.pagina--;
      this.carregaCliente();
    }
    console.log("maçã");
    console.log(this.pagina);
  }

  public proximo() {
    //if (this.pagina < this.numeroPaginas()) {
      this.pagina += 1;
      this.carregaCliente();
    //}
    console.log("banana");
    console.log(this.pagina);
  }

  numeroPaginas() {
    return Math.ceil(this.allClientes.length / this.quantidadePorPagina);
  }

服务：

getAll(o={pagina: 1, quantidadePorPagina: 10, filtro: {nmCliente: ''}}): Observable<Cliente[]> {

    let headers = new HttpHeaders()
    .append(basic auth)
    .append(sessionStorage)
    .append(Token JWT);
    return this.http.get<Cliente[]>
    (`${this.apiUrl}/filtro/geral?quantidadePorPagina=${o.quantidadePorPagina}&pagina=${o.pagina}&nmCliente=${o.filtro.nmCliente}&nmFantasia=&dtCadastro=&tpSituacao=`,
    { headers }).pipe(catchError(this.handleError));
  }

typescript 使用后端查询参数分页

1条答案

相关问题

热门标签

最新问答