Question

我是Angular的新手并尝试使用真实数据。

我正在对darksky API进行API调用，至少我正在尝试这样做。

我想做的是;

一开始我有一个小表单，要求用户输入一个地方的lat和long个协调。

代码实际上工作正常，如果我预先定义lat和long并将其作为参数提供给我的链接。

我已经创建了一个进行API调用的服务。

我找不到任何可能的方法来获取表单输入值并将其放入一项服务。我该如何创建它？

我的代码;

我的服务app.service.ts

    import { Injectable } from '@angular/core';
    import { Http, Response } from '@angular/http';
    import 'rxjs/add/operator/map';

    @Injectable()
    export class WeatherService {
      constructor (private http: Http) {}

      getWeatherCast() {
        // If I pre-define lat and long , it works  otherwise it says ' lat and long  are not known variables  :( 
        return this.http.get('https://api.darksky.net/forecast/ae249dfb82f6c414cde7809cd2c83e6d/'+ lat + ',' + long)
          .map((res: Response ) => res.json());
      }
    }

我的app.component.ts

import {Component, OnInit} from '@angular/core';
import { WeatherService } from "./app.service" ;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
  constructor(private weatherService : WeatherService) {}
  ngOnInit() { }


  currentWeather ;
  test (value: any ) {
    // console.log(value);
      console.log(Number(value.lat), 'lat');
      console.log(value.long, 'long');
      this.weatherService.getWeatherCast().subscribe(data => this.currentWeather = data);
      console.log('Weather is ; ', this.currentWeather);


  }
}

和我的HTML;

    <div class="container">
  <h3> Test Weather application</h3> <br>
  <form #myForm ='ngForm' (ngSubmit)="test(myForm.value)">
    <div class="form-group">
      <label> Lat </label>
      <input type="text" class="form-control" name="lat" ngModel>
    </div>
    <div class="form-group">
      <label> Long </label>
      <input type="text" class="form-control" name="long" ngModel>
    </div>
    <button class="btn btn-primary" type="submit">
      <h2> Find out What's the weather like !  </h2>
    </button>
  </form>

</div>

Answer 1

在组件中定义变量lat和lng

export class AppComponent implements OnInit{
 lat: number;
 lng: number;
}

使用模型变量

更改模板

将值传递给您的服务，

 this.weatherService.getWeatherCast(this.lat,this.lng).subscribe(data => this.currentWeather = data);

此外，您的服务应修改为，

 getWeatherCast(lat:any,long:any) {            
        return this.http.get('https://api.darksky.net/forecast/ae249dfb82f6c414cde7809cd2c83e6d/'+ lat + ',' + long)
          .map((res: Response ) => res.json());
      }

如何动态地将用户输入添加到服务中的Http Call

1 个答案: