一、WebApp介紹

1.初始界面

2.搜索結果頁面

二、項目代碼

1.項目目錄

--------app

----------app.component.ts

----------app.component.css

----------app.component.html

----------app.module.ts

2.app.component.html

 1 <div class="content">
 2     <div>
 3         <img width="300" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
 4     </div>
 5     <h2>{{title}}</h2>
 6     <div>
 7         <form class="form-inline">
 8           <div class="form-group">
 9             <label for="exampleInput">Address</label>
10             <input type="text" class="form-control" id="exampleInput" placeholder="Please input the address" name="searchAddress">
11           </div>
12           <button type="button" class="btn btn-default" (click)="start()">Search</button>
13         </form>
14     </div>
15 </div>
16 <div class="data" *ngIf="begin">
17     <table class="table table-striped">
18         <thead>
19             <tr>
20                 <th>日期</th>
21                 <th>天氣</th>
22                 <th>日間溫度</th>
23                 <th>夜間溫度</th>
24                 <th>氣壓值</th>
25                 <th>濕度</th>
26                 <th>天氣情況</th>
27             </tr>
28         </thead>
29         <tbody>
30             <tr *ngFor="let DL of DataList;let i=index;">
31                 <td>{{dateString[i]}}</td>
32                 <td>{{DL.weather[0].main}}</td>
33                 <td>{{DL.temp.day}}</td>
34                 <td>{{DL.temp.night}}</td>
35                 <td>{{DL.pressure}}</td>
36                 <td>{{DL.humidity}}</td>
37                 <td><img src="http://openweathermap.org/img/w/{{DL.weather[0].icon}}.png"/></td>
38             </tr>
39         </tbody>
40     </table>
41 </div>

3.app.component.ts

 1 import { Component, OnInit } from '@angular/core';
 2 import {HttpClient} from '@angular/common/http';
 3 import 'rxjs/add/operator/toPromise';
 4 
 5 @Component({
 6     selector: 'app-root',
 7     templateUrl: './app.component.html',
 8     styleUrls: ['./app.component.css']
 9 })
10 export class AppComponent{ 
11     title = 'A weather search App!';
12     public http;
13     Data:any;
14     begin=false;//控制天氣結果列表是否出現
15     searchAddress:string;//查詢框文本的變數聲明
16     dateString:string[];//天氣結果列表的七個日期數組聲明
17     DataList:any;//獲取到的數據列表變數聲明
18     constructor(private Http:HttpClient) {
19         this.http = Http;
20     }
21     now=new Date()//獲取當前時間
22     GetDateStr(AddDayCount :number) {
23         this.now.setDate(this.now.getDate()+AddDayCount);//獲取AddDayCount天後的日期
24         let y = this.now.getFullYear();
25         let m = this.now.getMonth()+1;//獲取當前月份的日期
26         let d = this.now.getDate();
27         return y+"年"+m+"月"+d+"日";
28     }
29     ngOnInit() {//在組件載入進來的時候就執行
30         this.dateString=[this.GetDateStr(0),this.GetDateStr(1),this.GetDateStr(2),this.GetDateStr(3),this.GetDateStr(4),this.GetDateStr(5),this.GetDateStr(6)]
31     }
32     start(){//點擊查詢之後執行的函數
33         this.searchAddress = (document.getElementsByName('searchAddress')[0] as HTMLInputElement).value;//獲取搜索框裡面的文本
34         if(this.searchAddress.length!=0){//如果搜索框裡面的文本不為空，那麼結果列表出現，並且發送請求
35             this.begin=true;    
36             this.http.get("http://api.openweathermap.org/data/2.5/forecast/daily?q="+this.searchAddress+"&mode=json&units=metric&cnt=7&appid=f12159c1f548ea9ab7b5ff1907b1df50")
37                 .subscribe((data) => {
38                     this.Data=data;
39                     this.DataList=this.Data.list;  
40                 },
41                 err => { });
42         }else{//如果搜索框裡面的文本為空，那麼結果列表不出現，並且不發送請求
43             alert("請輸入地址");
44         }   
45     } 
46 }

4.app.component.css

1 .content{
2     width: 340px;
3     margin: 0 auto;
4 }
5 .data{
6     width: 800px;
7     margin: 0 auto;
8     margin-top: 10px;
9 }

ps：項目中的數據介面親測可用，大家可以玩玩

項目代碼地址https://github.com/Nangxif/WeatherWebApp