this.myArrayVariable 在 Angular 中未定义答案

【问题标题】：this.myArrayVariable is undefined in Angularthis.myArrayVariable 在 Angular 中未定义
【发布时间】：2018-02-05 19:05:53
【问题描述】：

我正在 Angular 4 中实现一个 socke.io 聊天应用程序。我有一个表示用户收到的消息的数组，我很难更新这个数组，我似乎无法引用它。

@Component({
    .....
})
export class JanelaChatComponent implements OnInit {
    mensagens: MensagemChat[];
    ngOnInit() {
        this.socket.on("update", function (msg) {
            this.mensagens.push(new MensagemChat(msg)); // this.mensagens is undefined here
        });
    }
}

当我收到一条消息并尝试通过创建我的模型 (MensagemChat) 的新实例将消息推送到数组时发生错误。我正在使用包 ngx-socket-io。

【问题讨论】：

mensagens: MensagemChat[] = [] ?
@Striped 我不知道你的代码在没有箭头函数的情况下是否可以工作，但你的初始化是缺失的。

标签： angular typescript socket.io

【解决方案1】：

当您使用typescript 时，请使用arrow 函数。

this.socket.on("update", (msg) => { 
      this.mensagens.push(new MensagemChat(msg)); // this.mensagens is undefined here
});

这会将您的控制器范围与function(msg) 部分绑定，您将能够在您正在执行this.mensagens.push... 的函数中访问它

更多参考Arrow function

看看这个答案Angular 5/4/2 method passed as reference is not in scope 也有类似的情况。

----更新----

首先，你需要初始化你的数组:)

export class JanelaChatComponent implements OnInit {
  mensagens: MensagemChat[];

  ngOnInit() {
    this.mensagens = [];

    this.socket.on("update", function (msg) {
        this.mensagens.push(new MensagemChat(msg)); // this.mensagens is undefined here
    });
  } 
}

【讨论】：

我仍然收到 _this.mensagens is undefined.
知道了，更新了答案。你犯了这么愚蠢的错误:)没关系
成功了！我并不是说我不需要了解更多关于 Typescript 的知识，初始化没有意义，更不用说 Typescript 不是很棒，因为它是，但我没想到必须写这个。信使 = [].

【解决方案2】：

胖箭头函数是sn-p下面使用的解决方案

@Component({ ..... }) 导出类 JanelaChatComponent 实现 OnInit { mensagens: MensagemChat[]; ngOnInit() { this.socket.on("update", (msg) => { this.mensagens.push(new MensagemChat(msg)); // this.mensagens 在这里没有定义 }); } }

【讨论】：