2

Google マップのオートコンプリートをセットアップしようとしています。しかし、私はこのエラーが発生しています

TypeError: Cannot read property 'slice' of undefined

ここの例に従いました: https://valor-software.com/ng2-bootstrap/index-bs4.html#/typeahead

私のコントローラーで：

this.googleLocation = Observable.create((observer:any) => {
      // Runs on every search
      observer.next(this.locationSearch);
    }).mergeMap((token:string) => this.getPredictions(token))

getPredictions 関数:

getPredictions (value) {
    return Observable.of(
        this.autocompleteService.getQueryPredictions({
            input: value
        }, function(result, status) {

            if (status == google.maps.places.PlacesServiceStatus.OK) {
            console.log(result);


            return result;
            } else if (status == google.maps.places.PlacesServiceStatus.ZERO_RESULTS) {
            return [];
            } else {
            console.log(status)
            }
        })
    );
}

そして私の見解は次のようになります：

<input [(ngModel)]="locationSearch"
            name="locationSearch"
            [typeahead]="googleLocation"
            [typeaheadOptionsLimit]="7"
            [typeaheadWaitMs]="300"
            [typeaheadAsync]="false"
            (typeaheadOnSelect)="typeaheadOnSelect($event)"
            (typeaheadLoading)="changeTypeaheadLoading($event)"
            (typeaheadNoResults)="changeTypeaheadNoResults($event)"
            (typeaheadOnSelect)="typeaheadOnSelect($event)"
            [typeaheadOptionField]="'description'"
            placeholder="Locations loaded with timeout"
            class="form-control">

コンソールに次のダンプが表示されます。

EXCEPTION: TypeError: Cannot read property 'slice' of undefined
browser_adapter.ts:82 EXCEPTION: TypeError: Cannot read property 'slice' of undefinedBrowserDomAdapter.logError @ browser_adapter.ts:82BrowserDomAdapter.logGroup @ browser_adapter.ts:93ExceptionHandler.call @ exception_handler.ts:58(anonymous function) @ application_ref.ts:374schedulerFn @ async.ts:148SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ async.ts:133onError @ ng_zone.ts:142onHandleError @ ng_zone_impl.ts:95ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423
browser_adapter.ts:82 STACKTRACE:BrowserDomAdapter.logError @ browser_adapter.ts:82ExceptionHandler.call @ exception_handler.ts:61(anonymous function) @ application_ref.ts:374schedulerFn @ async.ts:148SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ async.ts:133onError @ ng_zone.ts:142onHandleError @ ng_zone_impl.ts:95ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423
browser_adapter.ts:82 TypeError: Cannot read property 'slice' of undefined
    at SafeSubscriber.eval [as _next] (typeahead.directive.js:186)
    at SafeSubscriber.__tryOrUnsub (Subscriber.ts:240)
    at SafeSubscriber.next (Subscriber.ts:192)
    at Subscriber._next (Subscriber.ts:133)
    at Subscriber.next (Subscriber.ts:93)
    at MergeMapSubscriber.notifyNext (mergeMap.ts:144)
    at InnerSubscriber._next (InnerSubscriber.ts:17)
    at InnerSubscriber.Subscriber.next (Subscriber.ts:93)
    at MergeMapSubscriber.notifyNext (mergeMap.ts:144)
    at InnerSubscriber._next (InnerSubscriber.ts:17)BrowserDomAdapter.logError @ browser_adapter.ts:82ExceptionHandler.call @ exception_handler.ts:62(anonymous function) @ application_ref.ts:374schedulerFn @ async.ts:148SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93Subject._finalNext @ Subject.ts:154Subject._next @ Subject.ts:144Subject.next @ Subject.ts:90EventEmitter.emit @ async.ts:133onError @ ng_zone.ts:142onHandleError @ ng_zone_impl.ts:95ZoneDelegate.handleError @ zone.js:327Zone.runTask @ zone.js:259ZoneTask.invoke @ zone.js:423
Subscriber.ts:243 Uncaught TypeError: Cannot read property 'slice' of undefined(anonymous function) @ typeahead.directive.js:186SafeSubscriber.__tryOrUnsub @ Subscriber.ts:240SafeSubscriber.next @ Subscriber.ts:192Subscriber._next @ Subscriber.ts:133Subscriber.next @ Subscriber.ts:93MergeMapSubscriber.notifyNext @ mergeMap.ts:144InnerSubscriber._next @ InnerSubscriber.ts:17Subscriber.next @ Subscriber.ts:93MergeMapSubscriber.notifyNext @ mergeMap.ts:144InnerSubscriber._next @ InnerSubscriber.ts:17Subscriber.next @ Subscriber.ts:93subscribeToResult @ subscribeToResult.ts:28MergeMapSubscriber._innerSub @ mergeMap.ts:128MergeMapSubscriber._tryNext @ mergeMap.ts:124MergeMapSubscriber._next @ mergeMap.ts:108Subscriber.next @ Subscriber.ts:93(anonymous function) @ createvent.component.ts:71Observable.subscribe @ Observable.ts:93Observable._subscribe @ Observable.ts:152MergeMapOperator.call @ mergeMap.ts:82Observable.subscribe @ Observable.ts:93subscribeToResult @ subscribeToResult.ts:32MergeMapSubscriber._innerSub @ mergeMap.ts:128MergeMapSubscriber._tryNext @ mergeMap.ts:124MergeMapSubscriber._next @ mergeMap.ts:108Subscriber.next @ Subscriber.ts:93DebounceTimeSubscriber.debouncedNext @ debounceTime.ts:71dispatchNext @ debounceTime.ts:89FutureAction.execute @ FutureAction.ts:30QueueScheduler.flush @ QueueScheduler.ts:24(anonymous function) @ FutureAction.ts:100ZoneDelegate.invokeTask @ zone.js:356onInvokeTask @ ng_zone_impl.ts:61ZoneDelegate.invokeTask @ zone.js:355Zone.runTask @ zone.js:256ZoneTask.invoke @ zone.js:423

createvent.component.ts:82 [Object, Object, Object, Object, Object]

createvent.component.ts:82 のオブジェクトは、Google の場所オブジェクトです。

どんな助けでも大歓迎です。

UPDATE 1 typehead.ts を見たところ、毎回_matches未定義になることがわかりました。getPrediction 関数にヒットするとすぐに、マップが関数を解決するように感じます。

ありがとう、

4

1 に答える 1

2

GetQueryPredictions メソッドはコールバックをパラメーターとして受け取り、実際には何も返しません。だからあなたがするとき：

 Observable.of(this.autocompleteService.getQueryPredictions({...

実際には、監視可能なストリームから undefined を返しています。したがって、エラーが発生します。データの読み取り方法を変更し、実際の値を Observable に入れるようにする必要があります。

于 2016-08-25T07:02:24.220 に答える