使用Angular 4和无头CMS渲染iframe

Question

我在Angular 4中嵌入来自API端点的iframe时遇到问题。

如果我想在Angular组件中嵌入iframe，它可以正常工作：

<div class="artist-detail" *ngIf="artist">
  <iframe src="https://open.spotify.com/embed?uri=spotify:album:3EwfQtjvyRAXsPWAKO5FDP" width="300" height="380" frameborder="0" allowtransparency="true"></iframe>
</div> 

但我在后端使用无头CMS（Drupal 8），以便客户端可以为每位艺术家添加不同的iframe。

通常我只是使用Angular＆＃39; [innerHTML]来渲染我从后端获得的文字：

<div class="artist-detail-bio" [innerHTML]="artist.bio"></div>

但是当我尝试使用iframe时，DOM会将其作为字符串读取。例如，以下是devtools中显示的内容：

我尝试使用innerHTML来删除字符串的第一个和最后一个字符，认为它删除了引号，但是没有。