如何在iframe的Angular中动态更改src？

Question

我有一个mat-option标记，我希望用户从下拉列表中选择一个选项，它将自动加载与用户选择相关的iframe src URL。

component.html

<div class="container">
<div class="row">
<div class=".col-md-10 .col-sm-10">
  <div *ngIf="selectedReport">
  <mat-card class="dashboard-card">
    <iframe width="950" height="680" ng-src="{{selectedReport.url}}" frameborder="0" allowFullScreen="true"></iframe>
  </mat-card>
  </div>
</div>

<div class=".col-md-2 .col-sm-2">
  <mat-card class="navigation-card">
    <mat-card-header>
      <mat-card-title>Report</mat-card-title>
    </mat-card-header><hr>
    <mat-card-content>
      <mat-select placeholder="Select a project">
        <mat-option *ngFor="let report of reports" [class.selected]="report === selectedReport">
          {{report.name}}
        </mat-option>
      </mat-select>
    </mat-card-content>
  </mat-card>
</div>

mock-data.ts 以下不是正确的网址。提供它们以显示结构

import { Report } from './model/report';

export const REPORTS: Report[] = [
{ id: 1, name: 'Test1', url:'<iframe 
src="https://www.google.com/maps/embed?" },
{ id: 2, name: 'test2', url:"https://www.google.com/maps/embed?" }
];