Question

很抱歉，这很简单，但无法弄清楚……

此代码为name.component.ts

import { Component, OnInit } from '@angular/core';
import {Stores} from '../../stores.module';
import {ActivatedRoute, Params} from '@angular/router';
import {BranchService} from '../branch.service';

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  positionMap: Stores;
  id: number;
  url: string;

  constructor(private storeService: BranchService,
              private route: ActivatedRoute) { }

  ngOnInit() {
       this.route.params.subscribe(
      (params: Params) =>  {
          this.id = +params['id'];
          this.positionMap = this.storeService.getStores(this.id);
      }
    );
  }
}

此代码为name.component.html

    <iframe width="6000" height="500" id="gmap_canvas"
            src =  "https://maps.google.com/maps?q={{positionMap.street}}%20{{positionMap.num}}%20%{{positionMap.city}}&t=&z=20&ie=UTF8&iwloc=&output=embed"
            frameborder="0"
            scrolling="no"
            marginheight="30"
            marginwidth="5"
    >

    </iframe>

我需要

src="https://maps.google.com/maps?q={{positionMap.street}}%20{{positionMap.num}}%20%{{positionMap.city}}&t=&z=20&ie=UTF8&iwloc=&output=embed"

我在URL中绑定positionMap的位置查看我输入的数据

我想看看例如 “ https://maps.google.com/maps?q=Brookline%20123%20%NewYork&t=&z=20&ie=UTF8&iwloc=&output=embed”

Answer 1

getUrl(positionMap) {
    return "https://maps.google.com/maps?q="+
        positionMap.street+"%20"+positionMap.num+"%20%" +
        positionMap.city+"&t=&z=20&ie=UTF8&iwloc=&output=embed"
}

然后您可以将html更改为此：

<iframe width="6000" height="500" id="gmap_canvas"
            [src] = "getUrl(positionMap)"
            frameborder="0"
            scrolling="no"
            marginheight="30"
            marginwidth="5">
</iframe>

类似地，如果您不想使用此方法，则应像当前一样对src进行插值，但是将src更改为[attr.scr]

要记住的另一件事是，在使用src时，请尝试使用strin插值，例如以下示例：

<img src={{positionMap?.url}} />

这将防止ngViewChecked错误发生后更改，并确保您始终发送字符串。

Angular 2绑定：追加到src

1 个答案: