如何从socket异步获取数据并显示在页面上？

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

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

试试这个。

Answer 2

您可以使用 NgZone

在区域中显式运行此代码

 constructor(private zone: NgZone)  {}

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

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

如需更多帮助，请查看 here。

此外，我建议您创建一个

Angular订阅服务器提供的数据流的服务。
创建一个订阅服务器提供的数据流的Angular服务。
将 Angular 服务中接收到的数据（来自服务）发送给 Observable 订阅者
然后在组件 ngOnInit 方法中订阅服务 Observable。

如需更多帮助，请查看 here。

希望对您有所帮助！

如何从socket异步获取数据并显示在页面上？

How to get data async from socket and display it on page?

angular

angular6

angular8