从控制台angular 5中的json获取未定义的值

时间:2018-10-13 11:51:51

标签: javascript angular angular5 ngfor

我对api的回应如下

 [
  {
    "Cinema_strName": "Cll, Kollam",
    "Cinema_strID": "CEWB",
    "Cinema_strBannerImg": "",
    "cinema_addr": "5th  Kollam",
    "cinema_loc": "<iframe src=\"https://www9550314\" width=\"600\" height=\"450\" frameborder=\"0\" style=\"border:0\" allowfullscreen></iframe>",
    "cinema_mob": 0
  },
  {
    "Cinema_strName": "Cs, Kollam",
    "Cinema_strID": "KEWB",
    "Cinema_strBannerImg": "",
    "cinema_addr": "Carlangara, Kollam, Kerala - 691581",
    "cinema_loc": "<iframe src=\"hsen!2sin49\" width=\"600\" height=\"450\" frameborder=\"0\" style=\"border:0\" allowfullscreen></iframe>",
    "cinema_mob": 0
  }
]

我想从我的代码下面的API中获取Cinema_loc

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

     console.log(this.loc);


  }else{
      alert('Cinema not found');
  }

})

但是它给了我不确定的价值。如果我写this.cinema[0].cinema_loc。我只会得到第一个响应iframe。请帮忙。

对于@nikhil

<div class="col-md-9">
    <div class="map" *ngFor="let map of html">
    <div [innerHTML]="map"></div>
   </div>
</div>

3 个答案:

答案 0 :(得分:1)

由于this.cinema可以是数组或对象,因此如果它是数组,则需要对其进行迭代。在尝试附加html时,可以使用Array.reduce创建html字符串,然后根据需要附加。尝试关注

let html = this.cinema.cinema_loc;
if(Array.isArray(this.cinema)) {
    html = this.cinema.reduce((a, {cinema_loc}) => a + cinema_loc, "");
}

答案 1 :(得分:0)

c.c this.cinema ,而不是对象,如果您想访问所有需要在其上进行迭代的元素。 / p>

要在模板上显示,请使用ngFor,如下所示,

array

如果您只需要所有元素中的Cinema_loc,则可以尝试

<ul>
    <li *ngFor="let cineObj of cinema">
      {{ cineObj.cinema_loc }}
    </li>
</ul>

如果要从中生成HTML,请使用

let result = this.cinema.map(a => a.cinema_loc);

答案 2 :(得分:0)

您的代码中有几个问题-

  1. 迭代电影院数组的方式错误。
  2. 消毒剂-angular将报告不安全的html,因此最好在使用前对其进行消毒。

创建消毒方法

  safeHTML(content) {
    return this.sanitizer.bypassSecurityTrustHtml(content);
  }

以html

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

演示

演示在这里https://stackblitz.com/edit/angular-iframe-sanitizer