时间戳

首页 > 解决方案 > Angular 4 如何将 innerHtml 与 *ngFor 一起使用？

javascript - Angular 4 如何将 innerHtml 与 *ngFor 一起使用？

问题描述

我有以下来自 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。变得不确定。

标签： javascriptangularangular5ngfor

解决方案

我认为这会奏效。第一个解决方案是：

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

第二个解决方案是：

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

推荐阅读