Angular 5 не может показать iFrame

Question

Я хочу показать содержимое данных, которое может содержать текст, изображение и iFrame (YouTube и т. Д.) В Angular 5, как показано ниже:

<p><iframe frameborder="0" height="460" scrolling="no" src="https://www.youtube.com/embed/uDGwCO1HDg0" width="300"></iframe></p>
<p><img class="ui-widget-content" src="http://localhost/stmd/public/uploads/media/original/1540875164_i4.jpg" /></p>
<p>How we work</p>

Я сделал следующий код в .html:

<div class="content" [innerHTML]="first.content"></div>

Выше отображается содержимое вместе с текстом и изображением, но iFrame отсутствует.

Позже я нашел пост Angular 4 | iframe должен быть заполнен в innerHTML и сделал именно то, что они сказали в файле .ts, см. ниже:

import {DomSanitizer} from '@angular/platform-browser';

constructor(
        private contentService:ContentService,
        private route: ActivatedRoute,
        private _global: AppGlobals,
        private meta: Meta, 
        private title: Title,
        private domSanitizer:DomSanitizer
        ) { }

ngOnInit() {
  this.first = this.domSanitizer.bypassSecurityTrustHtml(data.data.first);
}

data.data.first содержит изображения, текст и iframe.

Но я вижу, что весь контент отсутствует (без текста, без изображения, без фрейма).

Как я могу отобразить iFrame вместе с изображениями и текстом? Любая помощь?

Answer 1

Используйте это <div class="content" [innerHTML]="first"></div>. Замените first.content только на first.

Я считаю, data.data.first это что-то вроде <iframe width="something" height="something" src="something" ></iframe>.