Question

我收到以下来自api的回复

[  
   {  
      "Cinema_strName":"dfdsfsd, Ahmedabad",
      "Cinema_strID":"HIWB",
      "Cinema_strBannerImg":"F&BCombo.jpg",
      "cinema_addr":"fsdfsdfr,Drive-in Road, 380052, ",
      "cinema_loc":"<iframe src=\"fsdfsdfdsfsfdsfdsffsf4!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6a9f5938cfed5cd2!2sCarnival+Cinemas!5e0!3m2!1sen!2sin!4v1467809324170\" width=\"600\" height=\"450\" frameborder=\"0\" style=\"border:0\" allowfullscreen></iframe>",
      "cinema_mob":0
   }
]

我想从api获取iframe并追加到div映射

为此，我在TS文件中写道

  this.common.createAPIService('api/cinemas/List?CityName='+city, '').subscribe((result: any) => {
  if(result.length){
    this.cinema = result;
    console.log(this.cinema);
  }else{
      alert('Cinema not found');
  }
})

html模板：

<div class="map" *ngFor="let map of cinema">
     <div [innerHTML]="map.cinema_loc"></div>
 </div>

但是HTML没有出现，但是如果我正常绑定，就像下面这样

<div class="map" *ngFor="let map of cinema">
     <div>{{map?.cinema_loc}}</div>
  </div>

iframe以文本格式显示。

如何将其附加为html？

请帮助。

根据我在下面尝试过的给定解决方案

 this.common.createAPIService('api/cinemas/List?CityName='+city, '').subscribe((result: any) => {
  if(result.length){
    this.cinema = result;
    this.cinema = this.sanitizer.bypassSecurityTrustHtml(this.cinema);

    console.log(this.cinema);
  }else{
      alert('Cinema not found');
  }

但是不起作用。如果我用console.log this.cinema.cinema_loc。变得不确定。

Answer 1

我认为这可行。第一个解决方案是：

<ng-container *ngFor="let testString of testStrings">
<label [innerHtml]="testString"></label>
</ng-container>

第二个解决方案是：

this.testString = this.sanitizer.bypassSecurityTrustHtml(this.testString);

Answer 2

由于安全原因，由于Angular正在剥离它，因此您必须对其进行清理：

在模板中使用它：

<div class="map" *ngFor="let map of cinema">
  <div [innerHTML]="safeCinema(map.cinema_loc)"></div>
</div>

在组件中使用它：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  name = 'Angular';

  constructor(private sanitizer: DomSanitizer) {}

  cinema = [
    {
      "Cinema_strName": "dfdsfsd, Ahmedabad",
      "Cinema_strID": "HIWB",
      "Cinema_strBannerImg": "F&BCombo.jpg",
      "cinema_addr": "fsdfsdfr,Drive-in Road, 380052, ",
      "cinema_loc": "<iframe src=\"fsdfsdfdsfsfdsfdsffsf4!2i768!4f13.1!3m3!1m2!1s0x0%3A0x6a9f5938cfed5cd2!2sCarnival+Cinemas!5e0!3m2!1sen!2sin!4v1467809324170\" width=\"600\" height=\"450\" frameborder=\"0\" style=\"border:0\" allowfullscreen></iframe>",
      "cinema_mob": 0
    }
  ];

  safeCinema(cinemaLoc) {
    return this.sanitizer.bypassSecurityTrustHtml(cinemaLoc);
  }

}

这是您推荐的Sample StackBlitz。

Answer 3

由于某种原因，似乎您的map变量在第一次通过时未定义。尝试对以前的答案进行此修改：

<div [innerHTML]="map?.cinema_loc"></div>

Answer 4

只需执行以下检查-

与动态html注入相关的所有内容都需要经过DomSanitizer。您可以通过@Injecting DomSanitizer并调用方法bypassSecurityTrustHtml来实现。
确保您通过的iframe src是正确的。

您可以在此处查看实际的演示-https://stackblitz.com/edit/angular-ixzyza

注意：在演示链接中，我使用https://www.w3.org/TR/PNG/iso_8859-1.txt作为iframe src。

Angular 4如何在* ngFor中使用innerHtml？

4 个答案:

只需执行以下检查-