Невозможно прочитать свойство push из неопределенного Typescript / Angular 6

Question

Я внедряю небольшое приложение для чата с использованием socket.io, и оно с удовольствием работает нормально. Но меня беспокоит то, что когда я получил новый чат, мне нужно присвоить его строковому массиву для отображения в списке просмотра.

Я просто определил массив как "messages: string [] = [];" и отправил образец строки при загрузке страницы, и она работает нормально. Но когда я получил новое сообщение из сокета this.socket.on ('newmessage', function (data) * метод 1006 * сработает и сможет прочитать новое сообщение. Все вещи работают правильно.

Но когда я вставляю новую строку в мои "сообщения: строка [] = [];" массив. Я получаю сообщение об ошибке «Невозможно прочитать свойство» из неопределенного сообщения.

import { Component, OnInit} from '@angular/core';
import * as io from 'socket.io-client';

@Component({
  selector: 'app-chatbox',
  templateUrl: './chatbox.component.html',
  styleUrls: ['./chatbox.component.css'],

})

export class ChatboxComponent implements OnInit {
  socket;
  messages: string[] = [];
  
  constructor() { this.socket = io.connect('http://localhost:8000'); }

  ngOnInit() {
    this.initializeChatServer();
  }

  initializeChatServer() {
  
    this.messages.push( 'test 55');//This line works

    this.socket.on('newmessage', function (data) {
      console.log('message -> ' + data.nick + '>' + data.msg);     
      this.messages.push(data.msg); //Cannot read property 'push' of undefined
    }); 
    
  }

}

Answer 1

import { Component, OnInit} from '@angular/core';
import * as io from 'socket.io-client';

@Component({
  selector: 'app-chatbox',
  templateUrl: './chatbox.component.html',
  styleUrls: ['./chatbox.component.css'],
})

export class ChatboxComponent implements OnInit {
  socket;
  messages: string[] = [];

  constructor() { this.socket = io.connect('http://localhost:8000'); }

  ngOnInit() {
    this.initializeChatServer();
  }

  initializeChatServer() {

    this.messages.push( 'test 55');//This line works

    this.socket.on('newmessage', data => {
      console.log('message -> ' + data.nick + '>' + data.msg);     
      this.messages.push(data.msg); //Cannot read property 'push' of undefined
    });

  }

}

Answer 2

Я думаю, что это из-за синхронизации вызовов. Я думаю, что это не стандартный способ, но он работал после того, как я изменился, как это ..

 initializeChatServer() {

    this.messages.push( 'test 55');
    var self = this;//assgin this to var variable
    this.socket.on('newmessage', data => {
      console.log('message -> ' + data.nick + '>' + data.msg);     
      self.messages.push(data.msg); 
    });

  }

Answer 3

this.messages.push (data.msg); // Невозможно прочитать свойство 'push' из неопределенного

Потому что вы ошиблись this. Функции стрелок это исправят, например Изменить this.socket.on('newmessage', function (data) { на this.socket.on('newmessage', (data) => {