具有动态绑定的iFrame无法正常工作

Question

我是Angular的新手，我试图嵌入PowerBi报告来动态更改iFrame的src，如下所示

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
   Power BI Reports
  </h1>
  </div>
<select (onclick) = "selectedOption($event)">
    <option> Select </option>
  <option value="https://app.powerbi.com/reportEmbed?reportId=&groupId=&autoAuth=true&ctid="> Colony Productivity</option>
</select>

<iframe width="1140" height="541.25" ng-if="safeUrl" src="safeUrl" frameborder="0" allowFullScreen="true"></iframe>
<router-outlet></router-outlet>

component.ts是

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'PowerBIIntegration';
selectedValue: string = ''; 
safeUrl: SafeHtml ='';

constructor(private sanitizer: DomSanitizer) {
}
  selectedOption( event : any){
    this.selectedValue = event.target.value;
   this.safeUrl =  this.sanitizer.bypassSecurityTrustHtml(this.selectedValue);
    console.log(this.selectedValue);
  }
}

当我尝试致电http://localhost:4200时。页面不断加载并显示错误

Angular is running in the development mode. Call enableProdMode() to enable the production mode.

`core.js：15724错误错误：未捕获（承诺中）：错误：无法匹配任何路由。网址段：“ safeUrl” 错误：无法匹配任何路线。网址段：“ safeUrl”     在ApplyRedirects.push ../ node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError（router.js：2469）     在CatchSubscriber.selector（router.js：2450）

Answer 1

您犯了很多错误。与绑定类似，应避免在Angular on前缀中使用事件，而您正在select元素上使用该事件。使用click事件代替change。您在使用DomSanitizer服务时遇到的其他错误。当我们使用resource网址时，我们应该使用bypassSecurityTrustResourceUrl而不是bypassSecurityTrustHtml。您在Angular中使用bindings（仔细观察*ngIf，[src]）也犯了错误。我已经对您的代码进行了一些更正，下面是更新的代码。

component.html

<div style="text-align:center">
  <h1>
   Power BI Reports
  </h1>
  </div>
<select (change)="selectedOption($event)">
    <option> Select </option>
  <option value="https://app.powerbi.com/reportEmbed?reportId=&groupId=&autoAuth=true&ctid="> Colony Productivity</option>
</select>

<iframe width="1140" height="541.25" *ngIf="safeUrl" [src]="safeUrl" frameborder="0" allowFullScreen="true"></iframe>

component.ts

import { Component } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent  {
  title = 'PowerBIIntegration';
  selectedValue: string = ''; 
  safeUrl: SafeHtml ='';

  constructor(private sanitizer: DomSanitizer) {
  }

  selectedOption( event : any){
    this.selectedValue = event.target.value;
    this.safeUrl =  this.sanitizer.bypassSecurityTrustResourceUrl(this.selectedValue);
    console.log(this.selectedValue);
  }
}