使用 Angular 8 中的 http.get() 调用在 iframe 中显示报告

Question

I'm trying to load a report with an http.get() call and show it in an iframe using angular 8.

Here is the API response.

Component.ts

    export class LogsComponent implements OnInit {
  logsData;
  logs;

  displayString

  constructor( private httpService: HttpService, private loaderService: LoaderService,
    private domSanitizer: DomSanitizer) { }

  ngOnInit() {
    this.httpService.getLogs().subscribe(data => {
      this.logsData = data;
      this.displayString = this.domSanitizer.bypassSecurityTrustHtml(this.logsData);
    })

  }

}

component.html

<iframe [srcdoc]="displayString"></iframe>

Getting this error.

Answer 1

It looks like your HttpService is getting a string back from the API that cannot be deserialized into a JSON object. You can return put the string response into an object that has a property to store that string. On the component you can unwrap that JSON object and pass it to the component. ** One IMPORTANT thing to note is that Angular will see the string as insecure and you will need to sanitize the string by call the DomSanitizert.bypassSecurityTrustHtml and pass in the string to that method. Hope this helps.