ERROR TypeError: Cannot read properties of undefined (reading 'page')

Question

我需要一些帮助 angular

我正在尝试执行服务器端分页集成，但无论我提出多少次代码迭代，我都会收到相同的错误：

错误类型错误：无法读取未定义的属性（读取 'page'）在 ListingsComponent.ngAfterViewInit (listings.component.ts:271)

因为这个错误，我已经多次更改我的代码。这是当前的迭代代码：

HTML:

<ng-container *ngIf="listings$ | async as listings">
        <div class="col-lg-9">
        <div class="row align-items-center mb-4">
          <div class="col-md-6 col">
            <h4><span>{{listings.totalElements || listings.content.length }}</span> Services</h4>
          </div>
        </div>
        <div>
        
          <div class="row" >
            <div class="col-lg-4 col-md-6" *ngFor="let service of listings.content">
                <div class="service-widget">
                    <div class="service-img">
                        <a style="cursor: pointer;" (click)="routeToService(service.id)">
                            <img class="img-fluid serv-img" alt="Service Image" [src]="service.pictures ? service.pictures : 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg'">
                        </a>
                        <div class="item-info">
                            <div class="service-user">
                                <a href="javascript:void(0);">
                                    <img src="assets/img/customer/user-01.jpg" alt="">
                                </a>
                                <span class="service-price">{{service.fixedPrice}}</span>
                            </div>
                            <div class="cate-list">
                                <a class="bg-yellow" style="cursor: pointer;" (click)="routeToService(service.id)" class="bg-yellow" >{{service.name}}</a>
                            </div>
                        </div>
                    </div>
                    <div class="service-content">
                        <h3 class="title text-truncate">
                            <a class="ellipsis" style="cursor: pointer;" (click)="routeToService(service.id)">{{service.detailedDescription}}</a>
                        </h3>
                        <div class="rating">
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <i class="fas fa-star filled"></i>
                            <span class="d-inline-block average-rating">(4.3)</span>
                        </div>
                        <!-- <div class="user-info">
                            <div class="service-action">
                                <div class="row">
                                    <div class="col">
                                        <a [routerLink]="'/pages/edit-service'" class="text-success"><i class="far fa-edit"></i> Edit</a>
                                    </div>
                                    <div class="col text-right">
                                        <a href="javascript:void(0);" class="text-danger" data-toggle="modal" data-target="#deleteNotConfirmModal"><i class="far fa-trash-alt"></i> Inactive</a>
                                    </div>
                                </div>
                            </div>
                        </div> -->
                    </div>
                </div>
            </div>
            <div class="col-12">
          <mat-paginator [length]="listings.totalElements || listings.content.length " [pageSize]="pageSize" showFirstLastButtons>
          </mat-paginator>
            </div>
            
        </div>
        </div>
      </div>
       <!-- mat paginator goes here -->
          
      </ng-container>

打字稿：

  listingDataSource: ListingsDataSource | null;

  pageNumber: number = 1;
  pageSize: number = 9;
  sortBy: string = 'dateCreated';
  sortOrder: string = 'DESCENDING';
  keyword: string = this.router.snapshot.queryParamMap.get('search') || '';

  listings$: Observable<any>;

ngAfterViewInit(): void {
 
    this.listingDataSource = new ListingsDataSource(this._httpClient);
    merge(this.paginator.page)
      .pipe(
        startWith({}),
        switchMap(() => {
          return this.listingDataSource!.retrieveServiceListing(
            this.paginator.pageIndex
          );
          // .pipe(catchError(() => Observable(null)));
        }),
        map((data) => {
          if (data === null) {
            return [];
          }

          return data;
        })
      )
      .subscribe((data) => {
        this.listings$ = data;
        // console.log(this.data);
        return this.listings$;
      });
  }

这里是错误

ERROR TypeError: Cannot read properties of undefined (reading 'page')
    at ListingsComponent.ngAfterViewInit (listings.component.ts:271)
    at callHook (core.js:3281)
    at callHooks (core.js:3251)
    at executeInitAndCheckHooks (core.js:3203)
    at refreshView (core.js:7438)
    at refreshEmbeddedViews (core.js:8468)
    at refreshView (core.js:7391)
    at refreshComponent (core.js:8514)
    at refreshChildComponents (core.js:7173)
    at refreshView (core.js:7417)

我完全不知道我做错了什么。我在 3 个月前在另一个项目上做过类似的实现，当时它似乎工作正常

Answer 1

万一有人遇到这个问题。问题是 mat-paginator 是在 ng-container 内声明的，而 ng-container 仅在异步列表操作完成时退出 <ng-container *ngIf="listings$ | async as listings">

这就是导致错误的原因。解决方案是将 mat-paginator 移到 ng-container

之外

ERROR TypeError: Cannot read properties of undefined (reading 'page')

ERROR TypeError: Cannot read properties of undefined (reading 'page')

javascript

pagination

server-side-rendering

angular