我有這個陣列
"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>"
}
]
我正在使用 angular，我想訪問具有視頻的嵌入式 div。我已經這樣做了
<div *ngFor="let result of data.videos">
<p> {{result.embed}} </p>
這是我的 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)})}}
我已經按照@BrunoElo 的建議決議了 JSON 資料，但即使在應用了
<p [innerHTML]="result.embed"></p>
uj5u.com熱心網友回復：
我很確定這個問題的第二個答案會解決你的問題，但我想它有點不同
注意：不要對回應進行字串化或決議，它已經被 HttpClient 決議過
<div [innerHTML]="result.embed | safeHtml"></div>
創建以下管道 - 并記住將其添加到模塊declarations和exports欄位（或將其添加到共享模塊）
@Pipe({name: 'safeHtml'})
export class SafeHtmlPipe {
constructor(private sanitizer:DomSanitizer){}
transform(value: string) {
return this.sanitizer.bypassSecurityTrustHtml(value);
}
}
安全性：僅當您確實信任嵌入資料的來源時才使用此選項，否則您會讓您自己和您的應用程式容易受到 XSS 攻擊
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/352520.html
標籤：javascript html json 有角的 用户界面
上一篇：發出空字串事件會導致一個物件嗎？