Question

所以我在Angular周围找到了解决方法。刚开始使用基于OpenWeather API的应用程序，使用简单的GET方法。

所以这是我的app.component.ts：

import { Component } from '@angular/core';
import { WeatherService } from './weather.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [WeatherService]
})
export class AppComponent {
  title = 'Ng-Weather';
  cityName: string;    
  constructor(private weather: WeatherService) { }    
  search() {
    this.weather.getWeatherbyName(this.cityName);
  }
}

正如您所猜测的，cityName变量是双向绑定的。单击按钮调用search()函数，数据将传递给weatherservice。天气服务的内容是：

import { Injectable } from '@angular/core';
import { Http, Response, URLSearchParams } from '@angular/http';
import { Observable } from 'rxjs';
import { Weather } from './weather';
@Injectable()
export class WeatherService {
  APIurl = "http://api.openweathermap.org/data/2.5/weather";
  Appid = "xxx";
  constructor(private Http: Http) { }
  getWeatherbyName(name: string): Observable<any> {
    let myParams = new URLSearchParams();
    myParams.append('q', name);
    myParams.append('appid', this.Appid);
    // actual http request should look like this: http://api.openweathermap.org/data/2.5/weather?appid=xxx&q=Chennai
    return this.Http.get(this.APIurl, { search: myParams})
      .map(this.extractData)
      .catch(this.handleError);
  }
  private extractData(res: Response) {
    console.log(res.json());
    let body = res.json();
    return body.data;
  }
  private handleError(error: Response | any) {
    console.error(error.message || error);
    return Observable.throw(error.message || error);
  }
}

但是我的控制台或编译过程中没有错误。做错了什么？另外，我如何将我收到的JSON映射到我的班级并将该实例交还给app.component？

以下是我的课程：

export class Weather {
    city: String;
    max_temp: String;
    min_temp: String;
    description: String;
}

这是我收到的示例JSON：

{  
    "coord":{  
        "lon":80.28,
        "lat":13.09
    },
    "weather":[  
        {  
            "id":803,
            "main":"Clouds",
            "description":"broken clouds",
            "icon":"04n"
        }
    ],
    "base":"stations",
    "main":{  
        "temp":304.15,
        "pressure":1008,
        "humidity":79,
        "temp_min":304.15,
        "temp_max":304.15
    },
    "visibility":6000,
    "wind":{  
        "speed":3.1,
        "deg":160
    },
    "clouds":{  
        "all":75
    },
    "dt":1504629000,
    "sys":{  
        "type":1,
        "id":7834,
        "message":0.0029,
        "country":"IN",
        "sunrise":1504571272,
        "sunset":1504615599
    },
    "id":1264527,
    "name":"Chennai",
    "cod":200
}

正如您所看到的，我需要的是来自JSON的一些数据而不是整个数据。

Answer 1

这里的主要问题是您没有订阅var utils = require("tns-core-modules/utils/utils"); var myTextfield = page.getViewById("myTextFieldId"); if (myTextfield.ios) { console.log("myTextfield.ios"); // on ios this will open the keyboard but not on android myTextfield.focus(); } if (myTextfield.android) { console.log("myTextfield.android"); setTimeout(function() { // places the cursor here but doesn't open the keyboard myTextfield.android.requestFocus(); var imm = utils.ad.getInputMethodManager(); imm.showSoftInput(myTextfield.android, 0); }, 300); }功能正在生成的observable。 getWeatherbyName返回的Observable为cold：

Cold Observables在订阅时开始运行，即，在调用Subscribe时，可观察序列仅开始向观察者推送值。（...）这与热观察不同，例如鼠标移动事件或股票代码，即使在订阅激活之前已经产生了价值。

要订阅此可观察对象，您只需将Http功能更新为以下内容：

search

这绝不是您问题的完整解决方案 - 您将希望在订阅中执行某些操作，例如将收到的信息分配给组件的属性，以便可以在UI中呈现它们。

您的链接项目似乎还有其他问题，但如果需要，我建议您就Stack Overflow提出单独的问题，或者更好，您最喜欢的搜索引擎应该能够提供帮助。

Answer 2

尝试将RequestOptions对象传递给http get：

staticmethod

Angular没有正确传递HTTP GET参数

2 个答案: