Googleロケーション検索（Ionic）からの配列の長さ

Question

Googleプレイス検索の結果の値を返すために正しい構文の指示をしてくれますか？私の検索で5つの場所が返された場合と同様に、私は配列から5の値を取り出し、その情報を私のアプリに表示したいと思います。 "5つの場所が見つかりました！"私は近くの場所のリストを取得することができました。しかし、私は価値を得る方法がわかりません。

は今、私はGoogleプレイス検索の配列にアクセスするには、このコードを使用ここで

goToDirectionPage(index){ 

     console.log(this.places); 
     console.log("index" + index); 
     let selectedPlace = this.places[index].geometry.location; 

     console.log(selectedPlace); 

     this.navCtrl.push(DirectionPage, { 
     origin: this.currentLocation, 
     destination: selectedPlace 

     }); 
    } 

結果Googleプレイス検索の場所で

import { Component} from '@angular/core'; 
import { NavController, NavParams } from 'ionic-angular'; 

/** 
* Generated class for the DirectionPage page. 
* 
* See https://ionicframework.com/docs/components/#navigation for more info on 
* Ionic pages and navigation. 
*/ 

declare var google; 

@Component({ 
    selector: 'page-direction', 
    templateUrl: 'direction.html', 
}) 
export class DirectionPage { 

    origin: any; 
    destination: any; 
    map: any; 


    constructor(public navCtrl: NavController, public navParams: NavParams) { 
    this.origin = navParams.get('origin'); 
    this.destination = navParams.get('destination'); 
    this.map = navParams.get('map'); 
    } 

    ionViewDidLoad() { 
    this.calculateRoute(); 

    console.log('ionViewDidLoad DirectionPage'); 
    } 

    calculateRoute(){ 
    let mapOptions = { 
     center: this.origin, 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    this.map = new google.maps.Map(document.getElementById("directionMap"), mapOptions); 

    let directionsService = new google.maps.DirectionsService(); 
    let directionsDisplay = new google.maps.DirectionsRenderer(); 

    directionsDisplay.setMap(this.map); 

    let request = { 
     origin: this.origin, 
     destination: this.destination, 
     travelMode: google.maps.TravelMode.DRIVING 
    }; 

    directionsService.route(request, function(response, status){ 
     if(status == google.maps.DirectionsStatus.OK){ 
     directionsDisplay.setDirections(response); 
     directionsDisplay.setPanel(document.getElementById('directionPanel')); 
     }else{ 
     console.warn(status); 
     } 
    }); 

    } 


} 

Desired Result

Answer 1

にコードです。 html

<ion-card> 
     <ion-item ng-if = "places" > 
     Places Found: {{places?.length}} 
     </ion-item> 
    </ion-card> 

    <ion-card id="result"> </ion-card> 
     <button ion-item *ngFor = "let place of places; let i = index" (click)="goToDirectionPage(i)"> 
     {{place.name}} + <br/> {{place.vicinity}} <br /> Average Rating: {{place.rating}} 
     </button> 
    </ion-list>