我在我的 ionic 应用程序中使用了 google 自动搜索地点 API。它开始搜索但我的列表在选择一个地方后无法关闭

Question

page.html

<ion-searchbar [(ngModel)]="address"  (ionCancel)="dismiss()" name="address"  id="address"

     (ionInput)="searchPlace()" autofocus>


 </ion-searchbar>


 <ion-list style="margin-top: 20px;" >

  <ion-item class="addressList" *ngFor="let item of autocompleteItems"  

 (click)="selectAddress(item)">


  <ion-icon name="pin">

  </ion-icon>


  <p><small>{{ item.formatted_address }}</small></p>

  </ion-item>

    </ion-list>

   </ion-content>

page.ts

      updateSearch(){

       console.log(this.address);

     let address = this.address;

       let me = this;

         let location = [];

           let element = document.getElementById("map");

          let service = new google.maps.places.AutocompleteService();

             service.getPlacePredictions({ input: address }, 

                function(predictions, status) {

               if (status != google.maps.places.PlacesServiceStatus.OK) {

              //this.autocomplete = { input: '' };

              this.autocompleteItems = [];

             } else {


         for (var i = 0; i < predictions.length; i++) {

           let googlePlacesService = new google.maps.places.PlacesService(element);

         googlePlacesService.getDetails({

         reference: predictions[i].reference

         },

             function(details, status){

           if(details){

          //setTimeout(() => {

           location.push(details);

             if(i == predictions.length){

          me.autocompleteItems = location;

            console.log(location);

            }
                            //console.log(details);
                     //}, 1000*(i+1);
                  }
              });
            }
          }
         });
         }


            searchPlace(){

         //console.log(this.address);

           let address = this.address;

              let me = this;

             let location = [];

             let element = document.getElementById("map");

            let service = new google.maps.places.AutocompleteService(this.mapElement, {

             types: ['address']
           });

           service.getPlacePredictions({ input: address }, 

              function(predictions, status) {

            if (status != google.maps.places.PlacesServiceStatus.OK) {

              this.autocompleteItems = [];
                  } else {

               for (var i = 0; i < predictions.length; i++) {

              let googlePlacesService = new google.maps.places.PlacesService(element);

             googlePlacesService.getDetails({

             reference: predictions[i].reference

          }, function(details, status){

          if(details){

        //setTimeout(() => {

             location.push(details);

         if(i == predictions.length){

          me.autocompleteItems = location;

            console.log(location);
                      }

            //console.log(details);

            //}, 1000*(i+1);
                  }
              });
            }
          }
       });
       }






             selectAddress(item){

         let data : any;

          let custom = data;

             this.name = name;

            console.log(item)

              this.address = item.formatted_address;

          if(typeof item.geometry.location.lat != 'function'){

           this.start_pos = {

           lat: item.geometry.location.lat,

         lng: item.geometry.location.lng

           };
            // console.log( item.geometry.location.lat );

             } else {


                let data = item.geometry.location.toString();

               data = data.replace(/[{()}]/g, '');

              let latlngStr = data.split(',', 2);

               this.start_pos = {

             lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])

            };

           console.log(this.start_pos);

   }

  //this.viewCtrl.dismiss({lat:  this.start_pos.lat, long:  this.start_pos.lng, name: name});

           }


              ionViewDidLoad() {


             console.log('ionViewDidLoad createappointment');

         }

每当我从列表中选择一个地址时，它会显示在我的搜索栏中，但之后该列表不会消失，而且如果我删除所选地址，那么在这种情况下也会出现同样的问题。
从列表中选择地址后如何关闭列表。请帮助我，我没有找出我的代码哪里出了问题。感谢您的帮助。

Answer 1

在您的 selectAddress 函数中，在最后创建 autocompleteItems 空数组。所以它消失了。

selectAddress(item){
// your code
.
.
..

this.autocompleteItems = [];
}

我在我的 ionic 应用程序中使用了 google 自动搜索地点 API。它开始搜索但我的列表在选择一个地方后无法关闭

i used google auto search places API in my ionic app. It start search but my list cannot dismiss after selecting a place

html

css

ionic-framework

angular

ionic4