@在angular 7中具有多个自动完成ID的Viewchild

@在angular 7中具有多个自动完成ID的Viewchild,angular,Angular,我试图从viewchild显示这两个ID,但实际上只显示其中一个。我试图在同一页上为agm google maps显示两个不同的自动完成输入,一个是地图的实际输入,另一个只是地址搜索输入 html 如果您显示代码,那么帮助社区添加html和ts代码将非常有帮助 @ViewChild('search1', {static: false}) @ViewChild('search', {static: false}) <div class="col-md-5"> <div cl

我试图从viewchild显示这两个ID,但实际上只显示其中一个。我试图在同一页上为agm google maps显示两个不同的自动完成输入,一个是地图的实际输入,另一个只是地址搜索输入

html


如果您显示代码,那么帮助社区添加html和ts代码将非常有帮助

@ViewChild('search1', {static: false})
@ViewChild('search', {static: false})
<div class="col-md-5">
 <div class="form-group Search-text"> <input type="text" class="form-control border-btm" id="place" #search [formControl]="searchControl" placeholder="physical address">
                    </div>
                </div>

<div class="form-group Search-text">
<input type="text" class="form-control border-btm" id="auto-place" #search1 [formControl]="searchControl"placeholder="physical address">
      </div>
  @ViewChild('search1', {static: false})
  @ViewChild('search', {static: false})



  ngOnInit() {
    // set google maps defaults
    this.zoom = 16;
    this.latitude = -26.051738;
    this.longitude = 28.0244903;
    // create search FormControl
    this.searchControl = new FormControl();
    // set current position
    this.setCurrentPosition();
    // load Places Autocomplete
    this.mapsAPILoader.load().then(() => {
      const autocomplete = new google.maps.places.Autocomplete(
        this.searchElementRef.nativeElement,
        {
          types: [],
          componentRestrictions: { country: 'ZA' }
        }
      );
      autocomplete.addListener('place_changed', () => {
        this.ngZone.run(() => {
          // get the place result
          const place: google.maps.places.PlaceResult = autocomplete.getPlace();
          // verify result

          if (place.geometry === undefined || place.geometry === null) {
            return;
          }
          // set latitude, longitude and zoom
          this.latitude = place.geometry.location.lat();
          this.longitude = place.geometry.location.lng();
          this.zoom = 16;
        });
      });
    });
  }

  private setCurrentPosition() {
    if ('geolocation' in navigator) {
      navigator.geolocation.getCurrentPosition((position) => {
        this.latitude = position.coords.latitude;
        this.longitude = position.coords.longitude;
        this.zoom = 8;
      });
    }
  }