ОШИБКА TypeError: невозможно прочитать свойства неопределенного (чтение «контента»)

У меня есть весеннее загрузочное угловое приложение. и я делаю разбиение на страницы на стороне сервера. Мое приложение работает, но получает консольную ошибку на машинописном тексте.

список пользователей.component.ts :

userList(): void{
    this.userService.pagination(20, 1).pipe(
      tap(users => this.setUsers(users.content)),
      map((userData: UserData) => this.dataSource = userData)).subscribe();
  }

  setUsers(content: any){
    this.users = content;
  }

  onPaginateChange(event: PageEvent){
    let page = event.pageIndex;
    let size = event.pageSize;
    page = page + 1;
    this.userService.pagination(size, page).pipe(
      map((userData: UserData) => this.dataSource = userData)).subscribe();
  }

пользователь-service.service.ts :

  public pagination(pageSize: number, currentPage:number): Observable<UserData>{
    let params = new HttpParams();
    params = params.append('currentPage', String(currentPage));
    params = params.append('pageSize', String(pageSize));
    return this.http.get<UserData>(this.usersUrl, {params})
  }

user-data.ts :

export class UserData {
  content!: User[];
  pageable!: {
      sort: {
          empty: boolean,
          sorted: boolean,
          unsorted: boolean
      },
      offset: number,
      pageNumber: number,
      pageSize: number,
      paged: boolean,
      unpaged: boolean
  };
  last!: boolean;
  totalPages!: number;
  totalElements!: number;
  size!: number;
  number!: number;
  sort!: {
      empty: boolean,
      sorted: boolean,
      unsorted: boolean
  };
  first!: boolean;
  numberOfElements!: number;
  empty!: boolean;
}

Ошибка консоли

Что вызывает эту ошибку, и я не знаю, как это исправить.

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
0
835
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Основываясь на поставленном вами вопросе и информации, я должен предположить.

Похоже, что ответ не соответствует вашему классу UserData. Эта ошибка возникает, если вы пытаетесь получить доступ к свойству неопределенного объекта.

const users = null;
users.content // Error will be thrown

Но я заметил распространенное непонимание ввода вашего http-ответа классу. Вы получаете типичный Javascript.Object, а не экземпляр UserData. Вот почему я большую часть времени использую интерфейсы на Http.Responses. Если вам нужны экземпляры UserData, вы должны использовать новые UserData (ответ) и назначать их каждому свойству.

Другие вопросы по теме