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

Question

我正在尝试使用http.get()调用加载报告，并使用angularJS 2.0在iframe中显示该报告。

我的HTML看起来像这样：

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

• Klick on按钮调用我的控制器中的一个函数，我用http.get()
调用API

我的控制器看起来像这样：

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并将我的回复放在我的变量report中。之后，在我的HTML中的iframe上，我尝试显示如下响应：<iframe src="report"></iframe>

我遇到的问题是，当我点击button时，我的API调用无效。控制台没有错误，没有流量。我还在后端设置了一个断点，但它没有通过。它还复制了我的按钮和iframe（看截图）。当我像这样更改它时，它会在我的iframe：<iframe src="http://localhost:47503/reports/html"></iframe>中向我显示我的报告的HTML。因此，当我将链接直接放在src的{​​{1}}中时，我得到了一些数据（html，css）以及后端中的断点（看截图）。那么什么是错的或者是什么区别？有什么想法吗？

来自控制器的调用功能：

直接在iframe的src中调用链接：

Answer 1

试试这个

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.report = this.http.get(this.reportUrl)
    }
}