Question

我正在尝试设置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位置对象。

感谢任何帮助。

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

谢谢，

Answer 1

GetQueryPredictions方法接收回调作为参数，它实际上不是return anything。所以当你这样做时：

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

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

TypeError：无法读取未定义的ng2-bootstrap typeahead

1 个答案: