TypeError: Cannot read properties of undefined (reading 'pageNumber')

Question

我完全按照教程中的方式完成了它，但我的不起作用，我猜不出为什么，感谢您的帮助。

Pagination.ts:

    export interface PageQuery {
  pageNumber: number;
  pageSize: number;
}

export interface QueryBuilder {
  pageQuery: PageQuery;
  aditionalQuery: Map<string, string>;
  buildQueryMap(): Map<string, string>;
  buildQueryString(): string;
  buildPageQueryMap(): Map<string, string>;
}

export class PageRequest implements QueryBuilder {
  constructor(
    public _pageQuery: PageQuery,
    public _aditionalQuery: Map<string, string>
  ) {}
  public pageQuery!: PageQuery;
  public aditionalQuery!: Map<string, string>;

  buildQueryMap(): Map<string, string> {
    let buildQueryMap = new Map<string, string>([...this.buildPageQueryMap()]);
    if (this.aditionalQuery) {
      buildQueryMap = new Map<string, string>([
        ...buildQueryMap,
        ...this.aditionalQuery,
      ]);
    }

    return buildQueryMap;
  }
  buildQueryString(): string {
    return Array.from(this.buildQueryMap())
      .map((itemArray) => `${itemArray[0]}=${itemArray[1]}`)
      .join('&');
  }
  buildPageQueryMap(): Map<string, string> {
    let buildPageQueryMap = new Map<string, string>();

    buildPageQueryMap.set('page', `${this.pageQuery.pageNumber + 1}`);
    buildPageQueryMap.set('limit', `${this.pageQuery.pageSize}`);

    return buildPageQueryMap;
  }
}

export class Page<T> {
  constructor(public content: T[], public totalElements: number) {}

  static fromResponse<T>(response: any) {
    return new Page<T>(
      response.body,
      parseInt(response.headers.get('X-total-Count'))
    );
  }
}

服务：

 export class VeiculoService {
  private readonly API = 'http://localhost:8080/api/veiculos';

  constructor(private httpClient: HttpClient) {}

  list() {
    return this.httpClient.get<Veiculos[]>(this.API);
  }

  listPage(queryBuilder: QueryBuilder): Observable<Page<Veiculos>> {
    return this.httpClient
      .get<Veiculos[]>(`${this.API}?${queryBuilder.buildQueryString()}`, {
        observe: 'response',
      })
      .pipe(
        map((response: any) => <Page<Veiculos>>Page.fromResponse(response))
      );
  }

组件：

listarPaginas() {
    let queryAdicional!: Map<string, string>;
    this.service
      .listPage(
        new PageRequest(
          {
            pageNumber: this.pageEvent ? this.pageEvent.pageIndex : 0,
            pageSize: this.pageEvent ? this.pageEvent.pageSize : 5,
          },
          queryAdicional
        )
      )
      .pipe(take(1))
      .subscribe(
        (page) => {
          this.page = page;
        },
        (error) => {
          this.page = new Page([], 0);
        }
      );
  }

我从本教程中获得了这段代码：https://www.youtube.com/watch?v=9oLjN47xeeY&t=760s[1]

chrome 控制台出错：

ERROR TypeError: Cannot read properties of undefined (reading 'pageNumber') at PageRequest.buildPageQueryMap (Paginacao.ts:41:53) at PageRequest.buildQueryMap (Paginacao.ts:23:58) at PageRequest.buildQueryString (Paginacao.ts:34:28) at VeiculoService.listPage (veiculo.service.ts:22:52) at VeiculoComponent.listarPaginas (veiculo.component.ts:45:8) at VeiculoComponent_Template_mat_paginator_page_62_listener (veiculo.component.html:99:35) at executeListenerWithErrorHandling (core.mjs:15031:1) at Object.wrapListenerIn_markDirtyAndPreventDefault [as next] (core.mjs:15069:1) at ConsumerObserver.next (Subscriber.js:91:1) at SafeSubscriber._next (Subscriber.js:60:1)

Answer 1

这是一个运行时错误。意思是，在 pageNumber 属性被访问的时间点，它可能是未定义的或无效的。为避免这种情况，您需要通过添加称为 optional chaining operator 的问号 [=18 来防止属性出现此运行时问题=]?。这意味着简单地代替

${this.pageQuery.pageNumber + 1}

尝试

${this.pageQuery?.pageNumber + 1}

TypeError: Cannot read properties of undefined (reading 'pageNumber')

TypeError: Cannot read properties of undefined (reading 'pageNumber')

pagination

typescript

angular