Question

我是Angular的新手，并且已经尝试了好几个小时了。当我从JSON中获取lat和lng变量时，它们无法正确返回数字。

我从这里获取JSON：https://jsonplaceholder.typicode.com/users

这是component.html ...

<div *ngIf="user$">

<ul>

  <li><strong>Lat:</strong> {{ lat }}</li>
  <li><strong>Lng:</strong> {{ lng }}</li>

</ul>

  <agm-map [latitude]="lat" [longitude]="lng">
    <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
  </agm-map>

</div>

当我以这种方式在变量中设置值时，它在list和map元素中应有的作用。

工作component.ts

export class DetailsComponent implements OnInit {

  user$: any;

  constructor(private data: DataService, private route: ActivatedRoute) { 
    this.route.params.subscribe( params => this.user$ = params.id)
  }

  ngOnInit() :void {
    this.data.getUser(this.user$).subscribe(
      data => {
        this.user$ = data 
        console.log(this.lat, this.lng);

      } 
    )

  }
        lat: number = -37.3159;
        lng: number = 81.1496;

}

但是，当我尝试从JSON获取值时，变量将作为字符串返回，并且地图和标记不起作用，但是list元素起作用了。

不起作用的component.ts

export class DetailsComponent implements OnInit {

  user$: any;
  lat: number;
  lng: number;

  constructor(private data: DataService, private route: ActivatedRoute) { 
    this.route.params.subscribe( params => this.user$ = params.id)
  }

  ngOnInit() :void{
    this.data.getUser(this.user$).subscribe(
      data => {
        this.user$ = data 
        this.lat = this.user$.address.geo.lat;
        this.lng = this.user$.address.geo.lng;
        console.log(this.lat, this.lng);
      } 
    )

  }

}

当我将鼠标悬停在Visual Studio代码中的lat和lng变量上时，它看起来相同，并且显示（属性）DetailsComponent.lng：数字或（属性）DetailsComponent。 lng：数字。

Answer 1

因为agm需要一个整数值，并且您提供了一个字符串。我认为将其转换为数字值的最佳方法（如果您的数字格式使用点.（而不是逗号,），请使用+符号：

this.lat = +this.user$.address.geo.lat;
this.lng = +this.user$.address.geo.lng;

角谷歌地图没有得到纬度和经度变量

1 个答案: