Мне нужно сделать следующее: предположим, что у меня есть таблица с 20 записями, и я показываю их в 5, на следующей странице еще 5 записей и т. д. Итак, я хочу узнать способ, когда я нахожусь на последней странице, вызовите в моем API еще 20 записей и покажите их в таблице.

Я пробовал, но безуспешно. Я использую угловой материал

Это мой код html

<div class="col-12 col-md-6 text-right float-right">
  <mat-form-field>
      <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Buscador" upperCase>
  </mat-form-field>
</div>


<table mat-table [dataSource]="usuarios" class="mat-elevation-z8" matSort>

  <ng-container matColumnDef="Cedula">
    <th mat-header-cell *matHeaderCellDef mat-sort-header="Cedula"> Cedula </th>
    <td mat-cell *matCellDef="let user">{{ user?.Cedula }}</td>
  </ng-container>

  <ng-container matColumnDef="Nombres">
    <th mat-header-cell *matHeaderCellDef mat-sort-header="Nombres"> Nombres </th>
    <td mat-cell *matCellDef="let user">{{ user?.Nombres }}</td>
  </ng-container>

  <ng-container matColumnDef="Apellidos">
    <th mat-header-cell *matHeaderCellDef mat-sort-header="Apellidos"> Apellidos </th>
    <td mat-cell *matCellDef="let user">{{ user?.Apellidos }} </td>
  </ng-container>

  <ng-container matColumnDef="Email">
    <th mat-header-cell *matHeaderCellDef mat-sort-header="Email"> Email </th>
    <td mat-cell *matCellDef="let user">{{ user?.Email }} </td>
  </ng-container>

  <ng-container matColumnDef="Contacto">
    <th mat-header-cell *matHeaderCellDef mat-sort-header="Contacto"> Contacto </th>
    <td mat-cell *matCellDef="let user">{{ user?.Contacto }} </td>
  </ng-container>


  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="pageSize" (page)="pageEvent = handlePage($event)" showFirstLastButtons></mat-paginator>

TS

    @Component({
  selector: 'app-asignar-reclamacion',
  templateUrl: './asignar-reclamacion.component.html',
  styleUrls: ['./asignar-reclamacion.component.scss']
})
export class AsignarReclamacionComponent implements OnInit {

  //atributos
  displayedColumns: string[] = ['Cedula', 'Nombres', 'Apellidos', 'Email', 'Contacto'];
  usuarios = new MatTableDataSource([]);
  pageSize: number[] = [3];
  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: false }) sort: MatSort;
  //listUsuarios:User[]= []
  pageEvent: PageEvent;

  constructor(private activatedRoute: ActivatedRoute,private userService : UserService) { }

  ngOnInit(): void {
    this.activatedRoute.data.subscribe((data) => {
      console.log(data)
      this.usuarios = new MatTableDataSource(data.usuarios.page);
    })

    

  }

  // pageEvent(event){
  //   console.log(event)
  // }

  ngAfterViewInit(): void {
    this.usuarios.sort = this.sort;
    this.usuarios.paginator = this.paginator;
    console.log(this.paginator)
  }

  handlePage(event){
    let size = event.length
    let lastPage = event.pageIndex;
    if(lastPage + 1 == size){
      console.log("ultima pagina")
    }


    console.log(event)
  }
  

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim();
    filterValue = filterValue.toLowerCase();
    this.usuarios.filter = filterValue;
    if(this.usuarios.filteredData.length == 0){
      this.searchDB(filterValue)
    }
    console.log(this.usuarios.filteredData)
  }

  searchDB(text:string) {
    this.userService.getUserDataFilter(text).subscribe((data)=>{
      console.log(data)
    })
  }



}
1
Dani 10 Дек 2020 в 00:15

1 ответ

Лучший ответ

Чтобы проверить, находитесь ли вы на последней странице таблицы, вы должны проверить, есть ли у таблицы следующая страница или нет.

Используя событие (page), которое существует на <mat-paginator></mat-paginator>, вы можете проверить, есть ли у таблицы следующая страница или нет.

Примере:

В вашем html:

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" (page)="onPaginateChange($event)"></mat-paginator>

По твоему тс:

onPaginateChange(event) {
    console.log(this.dataSource.paginator.hasNextPage());
    console.log(event);
}

Вышеупомянутая функция hasNextPage() вернет false, если в таблице нет следующей страницы, и в этом случае вы можете загрузить больше данных.

1
Dharman 10 Дек 2020 в 11:08