ОШИБКА Ошибка: Uncaught (в обещании): TypeError: Невозможно прочитать свойство "push" из null

по какой-то причине я получаю эту ошибку здесь и не могу понять, почему. У меня инициализирован массив, что является причиной этой ошибки в 99% случаев. Я пытался инициализировать его с помощью private dashboardConversations: ChatDashboard[] = [] и так, как вы видите ниже.

profile.component.ts

import { DashboardService } from '../../../pages/chatdashboard/_modules/dashboard.service';

export class ProfileComponent implements OnInit {
 private dashboardService: DashboardService;

  @Input() public contact: Contact;

  public constructor(dashboardService: DashboardService) {
    this.dashboardService = dashboardService;
  }

  public ngOnInit(): void {
    this.image = this.contact.profilePicture;
    this._isAddInfoPresent();
    this.dashboardService.createNewConversation(this.contact);
  }
}

приборная панель.service.ts

export class DashboardService {

  private dashboardConversations: ChatDashboard[] = new Array<ChatDashboard>();
  private bsDashboardConversations$: BehaviorSubject<ChatDashboard[]> = new BehaviorSubject<ChatDashboard[]>(this.dashboardConversations);

  public constructor(){}

  public activeConversations$(): Observable<ChatDashboard[]> {
    return this.bsDashboardConversations$.asObservable();
  }

  public createNewConversation(user: Contact): void {
    const newUser: ChatDashboard = {
      id: user.id,
      profilePicture: user.profilePicture,
      isImportant: false,
      lastMessageReceived: null,
      hasUnreadMessages: false,
      unreadMessages: null,
    };
    console.info('user before push', newUser); // all appropriate info is there
    this.dashboardConversations.push(newUser); //Error here
  }
}

панель инструментов.page.ts

  public conversations$: ChatDashboard[] = [];
  private dashboardService: DashboardService;

  public constructor( dashboardService: DashboardService){
    this.dashboardService = dashboardService;
  }
  public ngOnInit(): void {
        this.dashboardService.activeConversations$().subscribe((conversations: ChatDashboard[]): void => {
      this.conversations$ = conversations;
    });
  }

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'push' of null

edit: показано больше кода.

откуда вызывается createNewConversation? и, пожалуйста, покажите подписку bsDashboardConversations$. очевидно, что панель DashConversations где-то обнуляется.

ysf 13.06.2019 14:41

хорошо, я опубликую больше информации. Дело в том, что все примеры, которые я видел ранее, были связаны с объявлением.

Ctfrancia 13.06.2019 15:43

@Ctfrancia, куда ты звонишь createNewConversation? скорее всего это неверный код

Poul Kruijt 13.06.2019 16:02

@PierreDuc в другом сервисе. Я называю это правильно, потому что информация, которая отправляется в функцию, есть. Я консолью зарегистрировал объект, прежде чем нажимать его, и информация там правильно.

Ctfrancia 13.06.2019 16:07

@Ctfrancia, но ... Я спрашиваю, как вы это называете, я довольно уверен в неправильном вопросе, из-за чего вы теряете this контекст класса обслуживания. Вы можете console.info объект, который хотите нажать, но this уже не тот this. Итак, можете ли вы опубликовать часть, где вы на самом деле вызываете метод createNewConversation

Poul Kruijt 13.06.2019 16:43

@PierreDuc хорошо ... я покажу больше кода

Ctfrancia 13.06.2019 16:43

@Ctfrancia захватывающе! :D

Poul Kruijt 13.06.2019 16:44

@PierreDuc добавил больше, но я не понимаю, как это сделать. Я делаю буквально то же самое, тот же тип BeaviorSubject с другим компонентом/сервисом и не теряю this через сервис. Я не могу ни за что, как теряется референция this. но эй, я ошибся однажды (и только один раз) раньше ?

Ctfrancia 13.06.2019 16:57

@PierreDuc Я также жестко запрограммировал объект для отправки, и все та же ошибка.

Ctfrancia 13.06.2019 17:06

Можете показать результат console.info(this). Поместите его ниже другого console.info, который у вас есть.

Poul Kruijt 13.06.2019 20:30

и есть ли где-нибудь в вашем сервисе, который вы делаете this.dashboardConversations = null;?

Poul Kruijt 13.06.2019 20:38

Давайте продолжить обсуждение в чате.

Ctfrancia 14.06.2019 09:18
Тестирование функциональных 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
1
12
643
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

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

Вы неправильно привязали свой метод createNewConversation к любому слушателю, поэтому я предполагаю, что контекст this потерян

// examples on how to properly do it
.subscribe((user) => this.createNewConversation(user));
.addEventListener((user) => this.createNewConversation(user));
.then((user) => this.createNewConversation(user));

Есть и другие способы, такие как использование .bind(this) или использование поля класса вместо метода.

Возможно, очистка кода и соблюдение стандартов немного помогут:

profile.component.ts

export class ProfileComponent implements OnInit {

  @Input() public contact?: Contact;

  constructor(readonly dashboardService: DashboardService) {}

  ngOnInit(): void {
    this.image = this.contact.profilePicture;
    this._isAddInfoPresent();
    this.dashboardService.createNewConversation(this.contact);
  }
}

приборная панель.service.ts

export class DashboardService {

  private readonly bsDashboardConversations$: BehaviorSubject<ChatDashboard[]> = new BehaviorSubject<ChatDashboard[]>([]);

  readonly activeConversations$ = this.bsDashboardConversations$.asObservable();

  constructor(){}

  public createNewConversation(user: Contact): void {
    const newUser: ChatDashboard = {
      id: user.id,
      profilePicture: user.profilePicture,
      isImportant: false,
      lastMessageReceived: null,
      hasUnreadMessages: false,
      unreadMessages: null,
    };

    this.bsDashboardConversations$.next([
      ...this.bsDashboardConversations$.getValue(),
      newUser 
    ]);
  }
}

панель инструментов.page.ts

  readonly conversations$ = this.dashboardService.activeConversations$;

  constructor(readonly dashboardService: DashboardService) {}

панель инструментов.page.html

<div *ngFor = "let conversation of conversations$ | async"></div>

Как он указал, когда я извлекал состояние, второй параметр задавался как null из TransferState.

Ctfrancia 14.06.2019 11:23

Инициализировать bsDashboardConversations$ внутри ngOnInit() функции

В объявлении значение не будет инициализировано.

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