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
   }
]

html模板：

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

---

但是不管用。如果我是console.log this.cinema.cinema\u loc。未定义。

由于安全原因，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);
  }

}

从'@angular/core'导入{Component}；
从“@angular/platform browser”导入{domsanizer}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:['./app.component.css']
})
导出类AppComponent{
名称='角度'；
构造函数（私有sanitizer:DomSanitizer）{}
电影院=[
{
“电影名称”：“dfdsfsd，艾哈迈达巴德”，
“电影院”：“HIWB”，
“电影院”——“F&BCombo.jpg”，
“电影院地址”：“fsdfsdfr，免下车道路，380052，”，
“电影院”：“，
“电影院暴徒”：0
}
];
安全电影院（cinemaLoc）{
返回此.sanitizer.bypassSecurityTrustHtml（cinemaLoc）；
}
}

这是你的参考资料。

我想这会有用的。 第一个解决方案是：

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

---

由于某种原因，

map

变量在第一次传递时似乎未定义。尝试对前面的答案进行此修改：

只需执行以下检查-

任何与动态html注入相关的内容都需要通过

DomSanitizer

。您可以通过@injection

DomSanitizer

并调用方法

bypassSecurityTrustHtml

来实现这一点

确保您传递的

iframe

src

是正确的

你可以在这里看到演示的效果-

---

注意：在演示链接中，我将其用作iframe src。

在控制台中，它的可能副本不起作用。正在获取电影院位置未定义。您是否尝试使用空运算符（？），例如：

[innerHTML]=“map？.cinema\u loc”

是。我也试过了，但不起作用。这是重复链接中的答案：@aloisdg，很抱歉。没有时间检查可能的重复项。：）我确实看到了

连接到dev服务器…

标记在那里。不确定它为什么没有加载，您是否尝试过直接在div中加载它来检查iframe源是否实际工作？这是重复链接中的答案：

<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);
  }

}

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

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