Question

使用es5，如何更新我的showWeather组件，以便当http响应从我的getWeather组件返回时#this.showData＆＃39;显示Open Weather api响应中的数据，然后我想循环显示在页面上？我想知道如何更新＆＃39; this.showData＆＃39;动态基本。任何帮助表示赞赏！

的index.html

<!DOCTYPE html>
<html>

    <head>
        <title>Angular 2 App</title>
         <link rel="stylesheet" href="styles.css">
    </head>
    <body class="container">
        <h1>Weather Forecaster using Angular 2</h1>
        <weather></weather>
        <show-weather></show-weather>
        <script src="https://code.angularjs.org/2.0.0-alpha.44/angular2.sfx.dev.js"></script>
        <script src="app.module.js"></script>
        <script src="showWeatherComponent.js"></script>
    </body>
</html>

getWeather Component

 var getWeather = ng.Component({
    selector: 'weather',
    providers: [ngHttp.HTTP_PROVIDERS],
    templateUrl: "getWeather.html"
})
.Class({
    constructor: [ngHttp.Http, function (Http){ //constructor function getting called with object.create()
        this.http = Http;
        this.weatherData = [];
    }],
    onSubmit: function (days, city){
    this.http.get("http://api.openweathermap.org/data/2.5/forecast/daily?q=" + city + "&mode=json&units=metric&cnt=" + days + "&appid=2de143494c0b295cca9337e1e96b00e0&units=imperial")
            .map(function (response){
                return response.json();
            })
            .subscribe(function(result){
                this.weatherData = result;
            });
    },
    getFinalData: function (){
        return this.weatherData;
    }


 document.addEventListener("DOMContentLoaded", function (){
      ng.bootstrap(getWeather);
 });

showWeather Component

 var showWeather = ng.Component({
    selector: 'show-weather',
    providers: [getWeather, ngHttp.HTTP_PROVIDERS],
    templateUrl: 'showWeather.html'
})
.Class({
    constructor: [getWeather, ngHttp.Http, function (getWeather, Http){       
     //how can I update this value when the api response comes back from the getWeather component 
      this.showData = getWeather;

    }]
});

document.addEventListener("DOMContentLoaded", function (){
      ng.bootstrap(showWeather);
});

getWeatherForm：

<!-- Options to find weather -->
<section class="row">
    <form (submit)="onSubmit(days.value, city.value)" role="form">
        <div class="form-group col-md-offset-1 col-md-3">
           <select class="form-control" #days>
            <option value="">--Select Number of Days--</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option  value="9">9</option>
            <option value="10">10</option>
            <option value="11">11</option>
            <option value="12">12</option>
            <option value="13">13</option>
            <option value="14">14</option>
            <option value="15">15</option>
            <option value="16">16</option>
        </select>
    </div>

    <div class="form-group col-md-5">
      <input type="text" class="form-control" #city placeholder="Enter Your City">
    </div>

    <div class="form-group col-md-3">
        <button type="submit" class="btn btn-success btn-block" id="submit">Get Forecast</button>
    </div>

   </form>
 </section>

showWeatherForm

<!--table to show the results from the open weather api -->
<section class="row table-responsive">
   <table class="table table-bordered table-hover">
        <thead>
           <tr>
              <th>Date</th>
              <th>Morning</th>
              <th>Mid-Day</th>
              <th>Evening</th>
              <th>Expect</th>
              <th>Description</th>
              <th></th>
          </tr>
      </thead>
      <tbody>
        <tr>
            <td></td>
            <td></td> <!--morning temp-->
            <td></td> <!--mid-day temp-->
            <td></td> <!--evening temp-->
            <td></td> <!--main weather summary for the day-->
            <td></td> <!--detailed description-->
            <td>

            </td>
        </tr>
      </tbody>
     </table>
    </section>

使用es5在Angular 2中的组件之间传递API响应数据

0 个答案: