Angular: привязка сообщений от Pubnub

Question

Я использую PubNub Angular для получения сообщений с сервера. Я получил сообщения успешно, но моя привязка в Angular не работает.

Вот моя функция:

import { Component, OnInit } from '@angular/core';
import { PubNubAngular } from 'pubnub-angular2';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  providers: [PubNubAngular]
})
export class AppComponent implements OnInit {
  title = 'GDentalv2';
  private publishkey = '';
  private subscribekey = '';
  public msg: string = "";


  constructor(public pubnub: PubNubAngular) {

  }

  ngOnInit() {
    this.pubnubInit();
  }

  pubnubInit() {

    this.pubnub.init({
      publishKey: this.publishkey,
      subscribeKey: this.subscribekey,
      ssl: true,
      uuid: "client"
    });
    this.pubnub.addListener({
      status: function (st) {
        if (st.category === "PNConnectedCategory") {
          // this.pubnub.publish({
          //   message: 'Hello from the PubNub Angular2 SDK!',
          //   channel: 'pubnub_onboarding_channel'
          // });
        }
      },
      message: function (message) {
        console.log(message);
        this.msg= message.message.content;
        console.log(this.msg);
      }
    });

    this.pubnub.subscribe({
      channels: ['pubnub_onboarding_channel'],
      withPresence: true,
      triggerEvents: ['message', 'presence', 'status']
    });
  }
}

В моем app.component.html:

<p>{{ msg }}</p>

После при получении сообщения переменная msg остается неизменной в app.component.html. Я не понимаю, почему это так.

Пожалуйста, помогите мне!

Answer 1

Проблема с областью функции. Измените стандартные функции на стрелочные функции в вашем слушателе.

У вас есть

    this.pubnub.addListener({
      ...
      message: function (message) {
        console.log(message);
        this.msg= message.message.content;
        console.log(this.msg);
      }
    });

Измените его, чтобы использовать стрелочные функции для исправления области this ключевое слово

    this.pubnub.addListener({
      ...
      message: (message) => {
        console.log(message);
        this.msg= message.message.content;
        console.log(this.msg);
      }
    });