代码之家 › 专栏 › 技术社区 › aless80

平均值应用程序:无法更新角度组件和UI中的变量

rxjs angular node.js

aless80 · 技术社区 · 6 年前

node-geocoder 但我不能用地理编码结果更新testgeocode变量。

out 包含服务外和订阅中的订阅方法:

map geocode clicked
service geocodePromise:  http://localhost:4000/stores/geopromise 
service out: Object { _isScalar: false, source: {â¦}, operator: {â¦} }
map geocode.subscribe res: Object { isFulfilled: false, isRejected: false }

更新:我没有看到 testgeocode

server.js:

import express from 'express';
import cors from 'cors';
...    

const app = express();
const router = express.Router();

var NodeGeocoder = require('node-geocoder');
var options = {
  provider: 'google', 
  httpAdapter: 'https',
  apiKey: 'My API Key',
  formatter: null
};
var geocoder = NodeGeocoder(options);

app.use(cors());

// Geocoder using promise
router.route('/geopromise').get((request, response) => {
  var promise = geocoder.geocode('29 champs elysÃ©e paris')
    .then(function(res) {
      console.log('Geocoding successful:' + res[0].latitude);
    })
    .catch(function(err) {
      console.log('Geocoding failed\n' + err);      
    });
    response.json(promise)   //EDIT: this was the problem. Move it to the .then()
})

app.use('/', router);    
app.listen(4000, () => console.log('Express server running on port 4000'));

myservice.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class MyService {
  uri = 'http://localhost:4000';

  constructor(private http: HttpClient) { }

  geocodePromise() {
    var url = `${this.uri}/geopromise`
    console.log('service geocodePromise: ',url)
    var out = this.http.get(url);
    console.log('service out: ',out)
    return out
  }
}

map.component.ts:

import { Component, OnInit } from '@angular/core';
import { MyService } from '../services/myservice.service';

@Component({
  selector: 'app-map',
  template: `
      <button type="submit" (click)="geocode()">geocode</button>
      {{testgeocode}}
            `,
   styleUrls: ['./map.component.css'],
})

export class MapComponent implements OnInit {
  constructor(private myService: MyService){}

  testgeocode: any;
  geocode(){
    console.log('map geocode clicked')
    this.myService
      .geocodePromise()
      .subscribe(res => {
        console.log('map geocode.subscribe res:',res)
        this.testgeocode = res[0]
        },
        err => { console.error('map err:',err); },
        () => {console.log('Completed') }
      );
  }
}

1 回复 | 直到 6 年前

aless80 6 年前

response.json(promise)

在server.js中的.then()中,如下所示:

// Geocoding using node-geocoder
router.route('/geopromise').get((req, res) => {
  geocoder.geocode('29 champs elysÃ©e paris')
  .then(data => {
    res.json(data);   //Here
  },reason => {
    console.log('Geocoding rejected\n',reason)
  })
  .catch(err => {
    console.log('Geocoding failed\n' + err);
  });
  //response.json(promise)   //Not here
});