在 Mat-Table (Angular) 中顯示分頁數據

Question

我有一個 CRUD REST API 將分頁數據發送到客戶端。 考慮以下數據接口：

export interface LCKData {
    // Some basic type fields from DB
}

export interface LCKPageData {
    content: LCKData[],
    pageable: any,
    totalElements: number,
    totalPages: number,
    last: boolean,
    numberOfElements: number,
    size: number,
    number: number,
    sort: any,
    first: boolean,
    empty: boolean
}

第二個界面是來自 Spring Boot web 應用程序的標准分頁數據。 我使用這個結構來設置 Paginator 組件的屬性，即總頁數。

我使用這兩個服務來獲取數據並創建一個 DataSource：

let LCKBaseAddress: string = "...";

@Injectable()
export class LockService {

    constructor(private http: HttpClient) { }

    findLCK(sortColumn = "sysTime", sortOrder = 'desc',
        pageNumber = 0, pageSize = 10): Observable<LCKPageData> {
        return this.http.get(LCKBaseAddress, {
            params: new HttpParams()
                .set('q', sortColumn)
                .set('d', sortOrder)
                .set('p', pageNumber.toString())
                .set('s', pageSize.toString())
        }).pipe(map(res => {
            res['payload'] = res;
            return res["payload"];
        }))
    };
   
}

和：

export class MainService extends DataSource<LCKData>{

    private loadingSubject = new BehaviorSubject<boolean>(false);
    private pageSubject = new BehaviorSubject<LCKData[]>([]);
    private locks$ = new Observable<LCKPageData>();
   
    constructor(private lockService: LockService) {
        super();
    };

    connect(collectionViewer: CollectionViewer): Observable<LCKData[]> {
        return this.locks$.pipe(pluck("content"));
    }

    disconnect(collectionViewer: CollectionViewer): void {
      this.loadingSubject.complete();
      this.pageSubject.complete();
    }

    loadLCK(sortColumn = "sys_time", sortOrder = 'desc',
        pageNumber = 0, pageSize = 10) {
        this.lockService.findLCK(sortColumn, sortOrder, pageNumber, pageSize).pipe(
            catchError(() => of([])),
            finalize(() => this.loadingSubject.next(false))
        )
            .subscribe(lcks => this.pageSubject.next(lcks['content']));
    }
}

最后是表格組件：

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent implements OnInit {

  public columns: string[];

  dataSource: MainService;

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

  constructor(public lock: LockService) {}

  ngOnInit(): void {
    this.dataSource = new MainService(this.lock);
    this.dataSource.loadLCK();
    this.columns = [ // Some columns //];
  }

  ngAfterViewInit() {
    this.sort.sortChange.subscribe(() => this.paginator.pageIndex = 0);
    merge(this.sort.sortChange, this.paginator.page)
      .pipe(
        tap(() => this.loadLessonsPage())
      )
      .subscribe();
  }

  loadLessonsPage() {
    this.dataSource.loadLCK(
      'sysTime',
      this.sort.direction,
      this.paginator.pageIndex,
      this.paginator.pageSize);
  }

}

和模板：

<table mat-table [dataSource]="dataSource" class="mat-elevation-z2" matSort matSortActive="sysTime"
        matSortDirection="desc" matSortDisableClear>
// Column and row definition

代碼運行沒有任何錯誤，但表中未顯示任何內容。

以前我用非分頁數據測試了相同的方法，一切正常，服務器響應 List<LCKData> 而不是 LCKPageData。

我使用 Angular 10。

有任何想法嗎？

Answer 1

您的connect()方法返回一個從不發射的可觀察對象！

與其將locks$初始化為新的 observable，不如從pageSubject中定義它。

private locks$: Observable<LCKData[]> = this.pageSubject.asObservable();

無需使用pluck ，因為您已經將content屬性發送到主題（ this.pageSubject.next(lcks['content']) ）：

connect(collectionViewer: CollectionViewer): Observable<LCKData[]> {
   return this.locks$;
}