tengo esta matriz
"videos": [ { "title": "0-1 \u00c1ngel Zald\u00edvar", "embed": "<div style='width:100%;height:0px;position:relative;padding-bottom:56.250%;'><iframe src='https:\/\/www.scorebat.com\/embed\/v\/61860cae4badd\/?utm_source=api&utm_medium=video&utm_campaign=v3' frameborder='0' width='100%' height='100%' allowfullscreen allow='autoplay; fullscreen' style='width:100%;height:100%;position:absolute;left:0px;top:0px;overflow:hidden;'><\/iframe><\/div>" } ]Estoy usando angular y quiero acceder al div incrustado que tiene un video. he hecho esto
<div *ngFor="let result of data.videos"> <p> {{result.embed}} </p> Todo lo que estoy en el navegador es una etiqueta div en lugar de un video incrustado. Puede alguien ayudar, por favorAquí está mi app.component.ts
export class AppComponent implements OnInit {stringfiedData:any;public data:any=[]constructor(private http: HttpClient) {}getData(){const url ='myApiUrl' this.http.get(url).subscribe((res)=>{this.stringifiedData = JSON.stringify(res);this.data = JSON.parse(this.stringifiedData);console.log(this.data)})}}Analicé los datos JSON según lo sugerido por @BrunoElo, pero aún obtengo solo el título, pero no el video, incluso después de aplicar el
<p [innerHTML]="result.embed"></p>Estoy bastante seguro de que la segunda respuesta de esta pregunta resolvería su problema, pero supongo que es un poco diferente
Nota: no encadene ni analice la respuesta, ya habrá sido analizada por HttpClient
<div [innerHTML]="result.embed | safeHtml"></div> Cree la siguiente canalización y recuerde agregarla a las declarations del módulo y campos de exports (o agregarla a un módulo compartido)
@Pipe({name: 'safeHtml'}) export class SafeHtmlPipe { constructor(private sanitizer:DomSanitizer){} transform(value: string) { return this.sanitizer.bypassSecurityTrustHtml(value); } }Seguridad: solo use esto si realmente confía en la fuente de los datos incrustados; de lo contrario, usted y su aplicación quedan abiertos a ataques XSS.