Javascript 使用http.get（）调用在iframe中显示报告

我正在尝试使用

http.get（）

调用加载一个报告，并使用angularJS 2.0在

iframe

中显示它

我的HTML如下所示：

<div class="report-viewer">
    <button (click)="loadReport()">Call API!</button>
    <iframe src="report"></iframe>
</div>

import { Component, OnInit } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Component({
    selector: 'app-report-viewer',
    templateUrl: './report-viewer.component.html',
    styleUrls: ['./report-viewer.component.scss']
})
export class ReportViewerComponent implements OnInit {

    report: Observable<any>;
    reportUrl: "http://localhost:47503/reports/html";

    constructor(private http: Http) { }

    ngOnInit() {
    }

    loadReport() {
        this.http.get(this.reportUrl).map(repsonse => this.report);
    }
}

• 我尝试调用API并将响应放入变量

  报告中。之后，在我的HTML中的iframe上，我尝试如下显示响应：
  

我遇到的问题是，当我单击

按钮时，我的API调用不起作用。控制台中没有错误，没有流量。我也在后端设置了一个断点，但没有成功。它还复制了我的按钮和iFrame（请看屏幕截图）。当我这样更改它时，它会在我的
iframe
：
中显示报告的HTML。因此，当我将链接直接放在
iframe
的
src
中时，我得到了一些数据（html、css）以及后端的断点（请看屏幕截图）。那么有什么不对或者有什么区别呢？有什么想法吗

从控制器调用函数：

直接在iframe的src中调用链接：
试试这个


从'@angular/core'导入{Component，OnInit}；
从'@angular/Http'导入{Http，Response}；
从“rxjs/Observable”导入{Observable}；
导入'rxjs/add/operator/map'；
@组成部分({
选择器：“应用程序报告查看器”，
templateUrl:“./report viewer.component.html”，
样式URL:['./报表查看器.component.scss']
})
导出类ReportViewerComponent实现OnInit{
报告：可见；
报告URL:“http://localhost:47503/reports/html";
构造函数（私有http:http）{}
恩戈尼尼特（）{
}
加载报告（）{
this.report=this.http.get（this.reportUrl）
}
}
是否调用了loadReport函数？也可以使用srcdoc属性来显示文档，而不是使用src。另一种方法是使用iframe..document.write（您的响应）@gusaindpk在iframe.document.write（您的响应）@gusaindpk中放置一个console.log（）-它在控制台中显示正确的输出，以便函数工作。如果您在js代码中获得响应，则可以使用iframe..document.write（您的响应）将响应写入iframe。而不是在html vai角度绑定中设置它。让kwon帮你看看例子。我认为我们必须使用.subscribe将响应附加到报表对象。