Question

我有一个套接字程序，它列出并提供日志数据。 Socket正在发送正确的数据，因为我正在获取正确的数据。

这是我的代码

export class RoboLogComponent implements OnInit {
dataToShow:any
@ViewChild('dataContainer') dataContainer : ElementRef;

loaddata(data:String) {
    this.dataContainer.nativeElement.innerHtml =data
}
ngOnInit():void{
console.log("I am triggering")
let socket=io('http://localhost:9999')
socket.on('send-log-data',function(data){
    console.log(data) //here it is displaying correct value emitted from socket
    this.dataContainer.nativeElement.innerHtml =data //but is not getting reflected
})
}
}

在html中，我已将其定义为追加。

<div #dataContainer></div>

这里来自套接字数据正在顺利但它没有反映到ui。在控制台中，它是正确的值。

实际上我的用例是我的后端代码之一，连续生成html格式的日志，我需要在web中显示日志

Answer 1

最后，经过大量研究，我得到了回答。我带来的消息

export class RoboLogComponent implements OnInit,AfterViewInit,OnDestroy {
 dataToShow:string="lets see if i am coming"
 socket:any

loaddata(data:any) {
    console.log("chcking")
    this.htmlToadd =this.htmlToadd+"<br>"+data
}
ngOnInit():void{
    this._labService.streamLogs().subscribe(data => 
this.socket=io('http://localhost:9999')
}


ngAfterViewInit(){
this.socket.on('send-log-data',function(data){
                this.loaddata(data)                
}.bind(this))
}
 ngOnDestroy(){
this.socket.disconnect()
}

}

在html文件中添加

<div class="abc" [innerHtml]="htmlToadd | sanitizeHtml" *ngIf='htmlToadd'></div>

这里使用的sanitizeHtml管道只是为了绕过动态加载的html内容的安全检查。

如何将来自socket io的数据附加到angular html

1 个答案: