angular - 类型错误 : Cannot read property 'slice' of undefined ng2-bootstrap typeahead

Question

我正在尝试设置 Google map 自动完成功能。但我收到此错误

TypeError: Cannot read property 'slice' of undefined 

我按照这里的例子:https://valor-software.com/ng2-bootstrap/index-bs4.html#/typeahead

在我的 Controller 中:

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 都会变得未定义。我觉得 map 一旦命中 getPrediction 函数就解析了该函数。

谢谢

Answer 1

GetQueryPredictions 方法正在接收回调作为参数，但实际上并没有 return anything 。所以当你这样做时:

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

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