Question

我订阅了从服务调用的api请求。如果我从ngInit中调用它们，我会得到正确的结果。如果调用来自模板文件中的按钮，则会收到错误消息：

ng:///AppModule/createDestinationDialog.ngfactory.js:116 ERROR TypeError: Object(...) is not a function
    at Observable.map (webpack-internal:///../../../../rxjs/_esm5/operator/map.js:39)
    at HttpClient.request (webpack-internal:///../../../common/esm5/http.js:1553)
    at HttpClient.get (webpack-internal:///../../../common/esm5/http.js:1611)
    at GeocodeService.geocodeAdress (webpack-internal:///../../../../../src/app/services/geocode.service.ts:28)
    at createDestinationDialog.geocode (webpack-internal:///../../../../../src/app/components/trip/createDestinationDialog/createDestinationDialog.component.ts:124)
    at createDestinationDialog.processButtonSearch (webpack-internal:///../../../../../src/app/components/trip/createDestinationDialog/createDestinationDialog.component.ts:121)
    at Object.eval [as handleEvent] (ng:///AppModule/createDestinationDialog.ngfactory.js:122)
    at handleEvent (webpack-internal:///../../../core/esm5/core.js:13745)
    at callWithDebugContext (webpack-internal:///../../../core/esm5/core.js:15254)
    at Object.debugHandleEvent [as handleEvent] (webpack-internal:///../../../core/esm5/core.js:14841)
View_createDestinationDialog_0 @ ng:///AppModule/createDestinationDialog.ngfactory.js:116
proxyClass @ webpack-internal:///../../../compiler/esm5/compiler.js:14873
DebugContext_.logError @ webpack-internal:///../../../core/esm5/core.js:15194
ErrorHandler.handleError @ webpack-internal:///../../../core/esm5/core.js:1716
dispatchEvent @ webpack-internal:///../../../core/esm5/core.js:10164
(anonymous) @ webpack-internal:///../../../core/esm5/core.js:10785
(anonymous) @ webpack-internal:///../../../platform-browser/esm5/platform-browser.js:2680
ZoneDelegate.invokeTask @ webpack-internal:///../../../../zone.js/dist/zone.js:421
onInvokeTask @ webpack-internal:///../../../core/esm5/core.js:4939
ZoneDelegate.invokeTask @ webpack-internal:///../../../../zone.js/dist/zone.js:420
Zone.runTask @ webpack-internal:///../../../../zone.js/dist/zone.js:188
ZoneTask.invokeTask @ webpack-internal:///../../../../zone.js/dist/zone.js:496
invokeTask @ webpack-internal:///../../../../zone.js/dist/zone.js:1517
globalZoneAwareCallback @ webpack-internal:///../../../../zone.js/dist/zone.js:1543
ng:///AppModule/createDestinationDialog.ngfactory.js:116 ERROR CONTEXT DebugContext_

错误行（这不是我的代码!!!它在rxjs / _esm5 / operator / map.js中）：

export function map(project, thisArg) {
    return higherOrderMap(project, thisArg)(this); <--Line 37 - it's the operator/map
}

我的gecode-service

export class GeocodeService {
   ....
   geocodeAdress(address: string): Observable {
     return this.http.get<Response>(url, {withCredentials: true});
   } 
 }

我的组件

ngOnInit() {
    this.geocode('test'); <-- this call works!!!
  }
ngAfterViewInit() {
      this.initializeMap();
    }
processButtonSearch(searchword: string): void { <-- this call comes from a button click in the template file. This call doesn't work 
    this.geocode('test');   
 }

initializeMap(): void {
     var styledMap = new google.maps.StyledMapType(this.globalMapDataService.mapStyle);
     map = new google.maps.Map(document.getElementById("createDestinationMap"), this.globalMapDataService.mapOptions);
     map.mapTypes.set('Map', styledMap);
     map.setMapTypeId('Map');
}
    geocode (searchword: string) {
         this.geocodeService.geocodeAdress('test'); // <--later will be searchword
         .subscribe(
            data => console.log(data),
            error => console.log(error));
   }

我的HTML：

            <div fxLayout="column" class="searchbox">
                <div fxLayout="row" fxLayoutAlign="center center">
                  <input fxFlex #searchword class="searchfield" id="autocompleteField"  placeholder="Search Destination">
                  <mat-divider></mat-divider>
                  <button mat-icon-button aria-label="Search" (click)="processButtonSearch(searchword.value)">
                    <mat-icon svgIcon="search"></mat-icon>
                  </button>
                </div>
              </div>
<div id="createDestinationMap" style="height: 250px" fxFlex="100" ></div>

有人有想法吗？

由于弗兰克

如果订阅Service-Api，Angular Object（...）不是函数

0 个答案: