Как получить данные asyn c из сокета и отобразить их на странице?

Question

Существует переменная:

public message: any;

Затем в шаблоне я попытался показать сообщение, если оно не пустое:

<div *ngIf="message">Message</div>

Но сообщение показывается, только когда я нажимаю в области где находится div.

Полный код:

ngOnInit() {
    connection.on("receivePassportData", data => {
       console.log(data);
       this.message = data;
    });
}

Я получаю данные в console.log(data);, но сообщение не отображается в шаблоне.

Answer 1

Вы можете явно запустить этот код в зоне, используя NgZone

 constructor(private zone: NgZone)  {}

 public connect(options: any) {
   // custom code
   [...]

  // socket event
  this.socket.on('receivePassportData', (data) => {
    this.zone.run(() => {
        this.message = data;
    });     
  });
 }

Для получения дополнительной помощи, пожалуйста, проверьте здесь .

Также я хотел бы предложить вам создайте

1. Angular Сервис, который подписывается на поток данных, предоставляемый сервером.
2. Создайте Angular Сервис, который подписывается на поток данных, предоставляемый сервером.
3. Излучение данных, полученных в службе Angular (от службы), для наблюдаемых абонентов
4. Затем подписка на услугу, наблюдаемую в компоненте ngOnInit.

Для больше помощи, пожалуйста, проверьте здесь .

Надеюсь, это поможет вам!

Answer 2

<div *ngIf="message && Object.keys(message).length > 0">Message</div>

Попробуйте это.