Блог

Я пытался реализовать разбиение на страницы на стороне сервера с помощью mat-пагинатора и столкнулся с множеством трудностей. Я проверил различные блоги и учебные пособия, но ни один из них не помог мне достичь моей цели.

Обслуживание-

 getAllCategoryByPage(data?: any): Observable<any> {
    var Url = `/Categories/GetAll`;
    return this.http
      .post<any>(Url, data)
      .pipe(catchError(this.handleError<any>('getAllCategoryByPage', [])));
  }
 

Компоненты .ts-

 @ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort; //sorting is not mandatory in my case
ngOnInit(): void {
    this.loadCategoryList;
    this.dataSource.paginator = this.paginator;
  }
  ngAfterViewInit() {
    this.loadCategoryList();
     this.dataSource.paginator = this.paginator;
  }
loadCategoryList = (): void => {
    this.paginator.page.subscribe((resp) => {console.log(resp);});    
    merge(this.paginator.page)
      .pipe(
        startWith({}),
        switchMap(() => {
          this.asyncService.start();
          console.log(this.paginator.pageIndex ,this.paginator.pageSize);
          return this.categoryService.getAllCategoryByPage(
            {
              "page": this.paginator.pageIndex   1,
              "pageSize": this.paginator.pageSize,
              "searchString": ""
            }
          )
        })
      )
      .subscribe(
        data => {
          console.log(data.apiData);
          this.length = data.totalRecord;
          this.dataSource.paginator = data.apiData;
          this.asyncService.finish();
        }
      );
  };
 

HTML-

 <table mat-table [dataSource]="dataSource">
      <ng-container matColumnDef="sl">
        <th mat-header-cell *matHeaderCellDef> SL. </th>
        <td mat-cell *matCellDef="let element; let i = index;"> {{i 1}} </td>
      </ng-container>
      <ng-container matColumnDef="name">
        <th mat-header-cell *matHeaderCellDef >CATEGORY NAME </th>
        <td mat-cell *matCellDef="let element"> {{element.categoryName}} </td>
      </ng-container>
      <ng-container matColumnDef="status">
        <th mat-header-cell *matHeaderCellDef >STATUS </th>
        <td mat-cell *matCellDef="let element">
         {{element.recStatus}}
        </td>
      </ng-container>
      <ng-container matColumnDef="actions">
        <th mat-header-cell *matHeaderCellDef>ACTIONS</th>
        <td mat-cell *matCellDef="let row" >
          <button class="table-button-action" style="color: red;" (click)="deleteRow(row)" >
            <mat-icon>clear</mat-icon>
          </button>
          <button class="table-button-action" style="color:royalblue;" (click)="onEdit(row)">
            <mat-icon>create</mat-icon>
          </button>
        </td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    </table>
    <mat-paginator [length]= "length" [pageSizeOptions]="[5, 10, 25, 100]">
    </mat-paginator>
 

Я не получаю данные в таблице. Здесь я получаю ошибку при загрузке страницы, а также при навигации по страницам (с помощью кнопок «Следующий» и «предыдущий»), о которой я понятия не имею, в чем заключается ошибка и как ее решить

Может ли кто-нибудь, пожалуйста, помочь мне исправить это, чтобы оно работало идеально?

Заранее спасибо 🙂

Похоже , что служебная функция getAllCategoryByPage не возвращает правильное Observable значение , и я ожидаю, что это произойдет из-за catchError неправильной работы (вы передали функцию непосредственно в нее, не возвращая наблюдаемое).

Поэтому не могли бы вы, пожалуйста, попробовать следующее:

 getAllCategoryByPage(data?: any): Observable<any> {
    var Url = `/Categories/GetAll`;
    return this.http.post<any>(Url, data).pipe(
        catchError(() => {
            this.handleError<any>('getAllCategoryByPage', []);
            return EMPTY;
        })
    );
}
 

В вашем subscribe обработчике у вас есть это:

 this.dataSource.paginator = data.apiData;
 

Вместо этого вам следует присвоить данные this.dataSource.data свойству.
Попробуйте это:

 this.dataSource.data = data.apiData;