ソケットioからのデータを角型のhtmlに追加する方法

Question

ログデータをリストして与えているソケットプログラムがあります。 ソケットが正しいデータをコンソールに送信しています。正しいデータを取得しています。

は、ここで私が追加することを定義しているHTMLで

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 
}) 
} 
} 

私のコードです。ここで

<div #dataContainer></div> 

は、ソケットからデータを適切に来ていますが、UIに反映取得されていません。 コンソールでは、正しい値が初期化されています。

実際には最終的に私が研究の多くを実行した後、私の質問には答えてしまった

Answer 1

私のユースケースは、継続的にHTML形式で私のバックエンドのコード生成ログの一つであり、私は、Web UIのログを表示する必要があります。私は

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ファイル内に付属 soutionはちょうどここだけ動的にロードされたHTMLコンテンツのセキュリティチェックをバイパスするために使用sanitizeHtmlパイプを

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

を追加します。