错误错误:未捕获(承诺):TypeError:无法读取null的属性“ push”

时间:2019-06-13 12:32:02

标签: angular typescript

由于某种原因,我在这里一直遇到此错误,无法理解原因。我已经初始化了数组,这是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);
  }
}

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错误:未捕获(承诺):TypeError:无法读取null的属性“ push”

编辑:显示了更多代码。

2 个答案:

答案 0 :(得分: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);
  }
}

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>

答案 1 :(得分:0)

AnswerText_text.set(count()) 函数中初始化bsDashboardConversations$

在声明中,该值不会被初始化。