ngx-bootstrap - 提前输入 : how to force the change detection

Question

我有一个关于 TypeAhead 的问题，因为我不想污染 git 空间积压。

我根据异步演示(我正在提取谷歌预测数据)将 typeahead 设置为与我自己的 observable 一起工作，并且 typehead 有点 工作，但有刷新(或更改检测) 问题，我输入了正确的地址，但突出显示的结果总是在突出显示的“后面”一两个字母，或者结果丢失，因为搜索范围可能已经缩小。例如，如果我向左或向右按​​下键，组件会更新，这告诉我一定存在一些检测问题。

是否有任何方法可以强制它检测更改？我试图在异步操作后立即运行更改检测器，但这没有帮助。感谢堆

这是 stackblitz 代码 https://stackblitz.com/edit/angular-ufgm4x

要了解我难以理解的延迟，请尝试按照以下步骤操作:

• 快速输入例如'30 曼尼'
• 等待响应，等一下，假设 3 秒
• 然后按“k”并等待，不要与应用程序交互...等待，然后仅在几秒钟后组件更新(匹配突出显示)。或者按“k”，稍等片刻并与该应用互动，您将看到高亮显示。

这似乎不是 google place 查找响应时间，因为它们非常好。一定还有别的东西。

这种奇怪的行为在搜索延迟时尤其明显

[typeaheadWaitMs]="1000"

export class TypeaheadComponent {
  asyncSelected: string;
  typeaheadLoading: boolean;
  typeaheadNoResults: boolean;
  dataSource: Observable<any>;

  constructor(private geocoder: GeocodeService,
              private chd: ChangeDetectorRef,
              private zone: NgZone) {
    this.dataSource = Observable.create((observer: any) => {
      // Runs on every search
      observer.next(this.asyncSelected);
    }).mergeMap((token: string) => this.geocoder.getSuggestions(token)).do(() => {
      setTimeout(() => {
          this.chd.detectChanges(); // --> Doesn't do anything
        }, 200);
    });
  }

  changeTypeaheadLoading(e: boolean): void {
    this.typeaheadLoading = e;
  }

  typeaheadOnSelect(e: TypeaheadMatch): void {
    console.log('Selected value: ', e.value);
  }
}

public getSuggestions(keyword: string): Observable<object> {

    if (typeof google === 'undefined') {
      return new Observable<object>();
    }

    const autocompleter = new google.maps.places.AutocompleteService();
    return new Observable<object>((observer) => {
      // Prepare the callback for the autocomplete
      const onPredictionsReady = (predictions: any[]) => {
        observer.next(predictions || []);
        observer.complete();
      };
      // do the search
      autocompleter.getPlacePredictions({ input: keyword }, onPredictionsReady);
    });
  }

Answer 1

我遇到了同样的问题，我是这样解决的:

我的服务:

import {Injectable} from '@angular/core';
import {MapsAPILoader} from '@agm/core';
import {Observable} from 'rxjs/Rx';
import {} from 'googlemaps';

@Injectable()
export class GooglePlacesService {
  googleAutocompleteService;

  constructor(private mapsAPILoader: MapsAPILoader) {
    this.mapsAPILoader.load().then(() => {
      this.googleAutocompleteService = new google.maps.places.AutocompleteService();
    });
  }

  getPredictions(inputText: string) {
    const callback = this.googleAutocompleteService.getPlacePredictions.bind(this.googleAutocompleteService);

    const observable = Observable.bindCallback(callback, (predictions, status) => {
      if (status !== google.maps.places.PlacesServiceStatus.OK) {
        return [];
      } else {
        return predictions;
      }
    });

    return observable({
      input: inputText
    });
  }
}

我的组件(ts):

import {Component, NgZone, OnInit} from '@angular/core';
import {} from 'googlemaps';
import {Observable} from 'rxjs/Observable';
import AutocompletePrediction = google.maps.places.AutocompletePrediction;
import {GooglePlacesService} from '../../api/google-places.service';

@Component({
  selector: 'search-location-input',
  templateUrl: './search-location-input.component.html',
  styleUrls: ['./search-location-input.component.css']
})
export class SearchLocationInputComponent implements OnInit {
  inputText = '';
  predictions: Observable<AutocompletePrediction[]>;

  constructor(private googlePlacesService: GooglePlacesService,
              private ngZone: NgZone) {
  }

  ngOnInit() {
    this.predictions = Observable.create((observer: any) => {
      this.googlePlacesService.getPredictions(this.inputText)
        .subscribe((result: any) => {
          this.ngZone.run(() => observer.next(result));
        });
    });
  }

}

我的组件(html):

<input [(ngModel)]="inputText"
   [typeahead]="predictions"
   typeaheadOptionField="description"
   [typeaheadWaitMs]="200"
   type="text">