home.component.html

<p style="color:green">題一</p>

cnt:<input type="number" min="1" max="7"><br>
城市資訊;<br>
<table border="1">
  <thead>
    <tr>
        <th rowspan="2">id</th>
        <th rowspan="2">name</th>
        <th colspan="2">coord</th>
        <th rowspan="2">country</th>
        <th rowspan="2">population</th>
      </tr>
      <tr>
        <th>lon</th>
        <th>lat</th>
      </tr>
  </thead>
  <tbody>
      <tr *ngFor="let item of list">
          <td>{{item.city.id}}</td>
          <td>{{item.city.name}}</td>
          <td>{{item.city.coord.lon}}</td>
          <td>{{item.city.coord.lat}}</td>
          <td>{{item.city.country}}</td>
          <td>{{item.city.population}}</td>
      </tr>
  </tbody>
</table>
天氣資訊;<br>
<table border="1">
		<tr>
			<th rowspan="2">時間</th>
			<th colspan="6">溫度</th>
			<th rowspan="2">壓力</th>
			<th rowspan="2">濕度</th>
			<th colspan="4">天氣</th>
			<th rowspan="2">風速</th>
			<th rowspan="2">風向</th>
			<th rowspan="2">雲量</th>
			<th rowspan="2">rain</th>
		</tr>
		<tr>
			<th>當天</th>
			<th>最低溫</th>
			<th>最高溫</th>
			<th>晚上</th>
			<th>下午</th>
			<th>早上</th>
			<th>ID</th>
			<th>main</th>
			<th>description</th>
      <th>icon</th>
  </tr>

  <!-- TODO  尚欠icon display-->

  <tbody *ngFor = "let l of list">
      <tr *ngFor = "let item of l.list_">
          <td>
              {{ item.dt * 1000 | date:'yyyy-MM-dd hh:mm:ss' }}
          </td>
          <td>
              {{ item.temp.day - 273.15 | number }} °C
          </td>
          <td>
              {{ item.temp.min | number }} °C
          </td>
          <td>
              {{ item.temp.max | number }} °C
          </td>
          <td>
              {{ item.temp.night | number }} °C
          </td>
          <td>
              {{ item.temp.eve | number }} °C
          </td>
          <td>
              {{ item.temp.morn | number }} °C
          </td>
          <td>
              {{ item.pressure | number:'.1-1' }} hpa
          </td>
          <td>
              {{ item.humidity | number }} %
          </td>
          <td *ngFor = "let item2 of item.weather">
              {{ item2.id }}
          </td>
          <td *ngFor = "let item2 of item.weather">
              {{ item2.main }}
          </td>
          <td *ngFor = "let item2 of item.weather">
              {{ item2.description }}
          </td>
          <td>
              <img [src]='pic'>
          </td>
          <td>
              {{ item.speed }} meter/sec
          </td>
          <td>
              {{ item.deg }} °
          </td>
          <td>
              {{ item.clouds }} %
          </td>
          <td>
              {{ item.rain }}
          </td>

      </tr>


  </tbody>
  <!--<tr *ngFor = "let item of list[0].list_">
      <td>
          {{item | json }}
			</td>
			<td>
          {{ item }} °C
			</td>
			<td>
          {{item | json}} °C
			</td>
			<td>
          {{item }} °C
			</td>
			<td>
          {{item  }} °C
			</td>
			<td>
          {{item }} °C
			</td>
			<td>
          {{item }} °C
			</td>
			<td>
          {{item}} hpa
			</td>
			<td>
          {{item}} %
			</td>
			<td>
				  {{item }}
			</td>
			<td>
          {{item }}
			</td>
			<td >
          {{item }}
			</td>
			<td>
          {{item }}
			</td>
			<td>
          {{item}} meter/sec
			</td>
			<td>
          {{item}} °
			</td>
			<td>
          {{item}} %
			</td>
			<td>
				  {{item}}
			</td>
      </tr> -->

</table>
<br>