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

1
votes

for some reason I have been getting this error here and can't understand why. I have the array initialized, which is the reason for this error 99% of the time. I have both tried to initialize it with private dashboardConversations: ChatDashboard[] = [] and the way you see below.

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);
  }
}

dashboard.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.log('user before push', newUser); // all appropriate info is there
    this.dashboardConversations.push(newUser); //Error here
  }
}

dashboard.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: showed more code.

2
angulartypescript
where does createNewConversation gets called from? and please show the subscription of bsDashboardConversations$. obviously dashboardConversations is getting nulled somewhere. – ysf
ok I'll post more information. It's that all the examples I've seen previously had to do with the declaration. – Ctfrancia
@Ctfrancia where are you calling createNewConversation? That's most likely the faulty code – Poul Kruijt
@PierreDuc in a different service. I am calling it correctly because the information that is being sent to the function is there. I console logged the object before pushing it and the information is there correctly. – Ctfrancia
@Ctfrancia but... I'm asking how you are calling it, I'm pretty confident in the wrong matter, which makes you lose the this context of the service class. You can console.log the object you want to push, but the this is no longer the right this. Sooo, can you post the part where you actually call the createNewConversation method – Poul Kruijt

2 Answers

2
votes

You've not properly binded your createNewConversation method to whatever listener, so I guess the this context is lost

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

There are other ways like using .bind(this) or using a class field instead of a method

Maybe cleaning up the code and keeping to standards is going to help a bit:

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);
  }
}

dashboard.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 
    ]);
  }
}

dashboard.page.ts

  readonly conversations$ = this.dashboardService.activeConversations$;

  constructor(readonly dashboardService: DashboardService) {}

dashboard.page.html

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

Initialize bsDashboardConversations$ inside ngOnInit() function

In the declaration, the value would not be initialized.