home.component.html

<p style="color:green">題一</p>
<p>關於這一題我看了很多網站但還是解決不出來，我分別在iT邦幫忙和stackOverflow提問<br>
  <a href="https://stackoverflow.com/questions/54032064/angular-how-to-do-ngfor-for-associative-array">stackoverflow</a>
  <br>  <a href="https://ithelp.ithome.com.tw/questions/10192112#answer-353378">iT邦幫忙</a>
<br>，照著他們的解答我依舊無法解決問題十分抱歉
<br>我認為問題點在於我無法將associative array插進第二個table裡面（第一個table可以），我嘗試過使用<br>
*ngFor  *ngif並用、<br>
ng-container<br>但依舊無法，請bass姐賜教
</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  -->

  <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 }} hpa
          </td>
          <td>
              {{ item.humidity | number }} %
          </td>
          <td>
              {{ item.weather.id }}
          </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>


  </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>