core.js：15723錯誤TypeError：無法讀取未定義的屬性“ OBJECT”

Question

我嘗試執行此功能時遇到問題。 我要做的所有事情就是從Google的api接收最近的地址。

我得到這個錯誤：

core.js:15723 ERROR TypeError: Cannot read property 'geometry' of undefined
at SafeSubscriber._next (coupon.service.ts:25)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:196)
at SafeSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next (Subscriber.js:134)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next (Subscriber.js:77)
at Subscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/map.js.MapSubscriber._next (map.js:41)
at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/operators/filter.js.FilterSubscriber._next (filter.js:38)
at FilterSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next (Subscriber.js:54)
at MergeMapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/mergeMap.js.MergeMapSubscriber.notifyNext (mergeMap.js:84)

api返回此json：

https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=AIzaSyBdVIF79ozR1oWiMo4Pdn1I4ReepZ0azHI

這是包含從api獲取“ long lat”功能的服務：

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http'
import { ApiResulte } from '../model/latlong.model';

@Injectable({
  providedIn: 'root'
})
export class CouponService {

  public myApi:ApiResulte;
  public lat:Number;
  public lng:Number;


  constructor(private myHttpClient:HttpClient) { 
    this.getLngLat();
  };

  public getLngLat(){
    this.myHttpClient.get<ApiResulte>('https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=AIzaSyBdVIF79ozR1oWiMo4Pdn1I4ReepZ0azHI').subscribe(
      res=>{
        this.myApi=res
        this.lat = this.myApi.results[1].geometry.viewport.northeast.lat;
        this.lng = this.myApi.results[1].geometry.viewport.northeast.lng;
      },
      err=>{console.log(err)}
    );
  };
};

服務中使用的componenta：

  import { Component, OnInit } from '@angular/core';
import { CouponService } from '../shered/services/coupon.service';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {


  constructor(public myService:CouponService) { }


  ngOnInit() { }

}

這是顯示lng lat的html部分：

<p >
  The lat is: {{myService.lat}}<br>
  The long is: {{myService.lng}}
</p>

我究竟做錯了什么？

Answer 1

此處，Google API返回數組中的單個對象。 數組索引從0開始，因此訪問數組this.myApi.results[0] 。 請替換以下方法以解決您的問題。

  public getLngLat(){
    this.myHttpClient.get<ApiResulte>('https://maps.googleapis.com/maps/api/geocode/json?address=1600+Amphitheatre+Parkway,+Mountain+View,+CA&key=AIzaSyBdVIF79ozR1oWiMo4Pdn1I4ReepZ0azHI').subscribe(
      res=>{
        this.myApi=res
        this.lat = this.myApi.results[0].geometry.viewport.northeast.lat;
        this.lng = this.myApi.results[0].geometry.viewport.northeast.lng;
      },
      err=>{console.log(err)}
    );
  };

希望有幫助！

Answer 2

這是因為您的api返回的數組只有一個值。 但是，您正在嘗試通過提供this.myApi.results [1]來訪問數組的第二個索引，該索引實際上並不存在。 數組索引始終以0而不是1開頭。我希望這可以解決您的問題。

    this.myApi=res
    this.lat = this.myApi.results[0].geometry.viewport.northeast.lat;
    this.lng = this.myApi.results[0].geometry.viewport.northeast.lng;