TypeError：無法讀取未定義的屬性「切片」ng2-bootstrap typeahead

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是谷歌位置對象。

任何幫助表示讚賞。

更新1 只見typeahead.ts，發現每次_matches去定義。我覺得，只要它碰到getPrediction函數，地圖就會解析函數。

謝謝，

Answer 1

GetQueryPredictions方法正在接收回調作爲參數，它實際上並不return anything。所以當你這樣做時：

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

你實際上從可觀察流返回undefined。因此，你得到的錯誤。您需要改變您讀取數據的方式，並確保將實際值放入Observable中。