Angular中如何通过ngFor动态向iframe地图URL添加经纬度？

看起来你是在Angular项目里遇到的问题对吧？这个错误主要是因为你在模板里直接用了原生JS的字符串拼接写法，导致Angular的模板解析器搞混了引号的闭合逻辑，误以为<iframe>标签提前结束了，所以抛出了那个报错。同时，直接在src属性里写JS表达式也不符合Angular的模板语法规范。

下面给你两种正确的解决方式，还会帮你处理Angular的安全校验问题：

方式一：直接使用属性绑定拼接URL #

Angular里要动态绑定属性，得用[src]这种属性绑定语法，而不是直接在属性值里写JS代码。你可以这样写：

<iframe 
  width="300" 
  height="170" 
  frameborder="0" 
  scrolling="no" 
  marginheight="0" 
  marginwidth="0"
  [src]="'https://maps.google.com/maps?q=' + details.latitude + ',' + details.longitude + '&hl=es&z=14&output=embed'"
></iframe>

这种写法把整个URL作为一个表达式传给[src]，模板解析器就能正确识别标签的闭合边界了。

方式二：用模板字符串（更易读） #

如果觉得加号拼接太繁琐，可以用ES6的模板字符串（反引号），写法更清晰直观：

<iframe 
  width="300" 
  height="170" 
  frameborder="0" 
  scrolling="no" 
  marginheight="0" 
  marginwidth="0"
  [src]="`https://maps.google.com/maps?q=${details.latitude},${details.longitude}&hl=es&z=14&output=embed`"
></iframe>

额外注意：Angular的安全拦截 #

不过直接这样写可能会遇到Angular的安全错误，因为Angular会默认拦截动态生成的资源URL，防止XSS攻击。这时候需要用DomSanitizer来处理URL：

1. 先在组件里导入并注入DomSanitizer：

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

@Component({
  selector: 'app-your-component', // 替换成你的组件选择器
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent implements OnInit {
  details: any; // 这里是你解析后的JSON数据
  mapUrl: SafeResourceUrl;

  constructor(private sanitizer: DomSanitizer) { }

  ngOnInit(): void {
    // 假设你已经在这里获取并解析了details数据
    const rawMapUrl = `https://maps.google.com/maps?q=${this.details.latitude},${this.details.longitude}&hl=es&z=14&output=embed`;
    this.mapUrl = this.sanitizer.bypassSecurityTrustResourceUrl(rawMapUrl);
  }
}

2. 然后在模板里绑定处理后的安全URL：

<iframe 
  width="300" 
  height="170" 
  frameborder="0" 
  scrolling="no" 
  marginheight="0" 
  marginwidth="0"
  [src]="mapUrl"
></iframe>

这样就能完美解决模板解析错误，同时正确加载带经纬度的谷歌地图iframe了。

内容的提问来源于stack exchange，提问作者user8231819