时间戳

首页 > 解决方案 > 在预期流的位置提供“未定义”。可以提供 Observable、Promise、Array 或 Iterable

angular - 在预期流的位置提供“未定义”。可以提供 Observable、Promise、Array 或 Iterable

问题描述

我一直在尝试使用mat-paginator实现服务器端分页并且遇到了很多困难。我查看了各种博客和教程，但没有一个对我实现目标有太大帮助。

服务-

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>

我没有得到表中的数据。在这里，我在加载页面以及浏览页面（使用下一个和上一个按钮）时遇到错误，我不知道发生了什么错误以及如何解决它

谁能指导我修复它以使其完美运行？

提前致谢 ：）

标签： angulartypescriptrxjspaginatormat-pagination

解决方案

在你的subscribe处理程序中，你有这个：

this.dataSource.paginator = data.apiData;

您应该将数据分配给this.dataSource.data属性。尝试这个：

this.dataSource.data = data.apiData;

推荐阅读