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 (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 位置对象。

任何帮助表示赞赏。

更新 1 我看到了 typeahead.ts 并发现每次_matches都未定义。我觉得地图一旦遇到 getPrediction 函数，就会解析该函数​​。

谢谢，

4

1 回答 1

2

GetQueryPredictions 方法接收回调作为参数，它实际上不返回任何内容。所以当你这样做时：

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

你实际上是从可观察的流中返回 undefined 。因此你得到的错误。您需要更改读取数据的方式，并确保将实际值放入 Observable。

于 2016-08-25T07:02:24.220 回答