Angular:如何为关联数组做* ngFor

时间:2019-01-04 01:29:44

标签: angular7

// dataJSON(数组)

dataList.const.ts

https://codebeautify.org/jsonviewer/cb28b09d

component.html

// 1st *ngFor(有效

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

enter image description here

// 2第*ngFor(无法显示)

<tr *ngFor="let item of list">
        <td>
      {{item.list_}}
        </td>
        <td>
      {{item.list_.temp.day}} °C
        </td>
        <td>
      {{item.list_.temp.min}} °C
        </td>
        <td>
      {{item.list_.temp.max  }} °C
        </td>
        <td>
      {{item.list_.temp.night  }} °C
        </td>
        <td>
      {{item.list_.temp.eve  }} °C
        </td>
        <td>
      {{item.list_.temp.morn  }} °C
        </td>
        <td>
      {{item.list_.pressure}} hpa
        </td>
        <td>
      {{item.list_.humidity}} %
        </td>
        <td>
              {{item.list_.weather.id }}
        </td>
        <td>
      {{item.list_.weather.main }}
        </td>
        <td >
      {{item.list_.weather.description }}
        </td>
        <td>
      {{item.list_.weather.icon }}
        </td>
        <td>
      {{item.list_.speed}} meter/sec
        </td>
        <td>
      {{item.list_.deg}} °
        </td>
        <td>
      {{item.list_.clouds}} %
        </td>
        <td>
              {{item.list_.rain}}
        </td>
    </tr>

enter image description here

tq为您提供帮助

1 个答案:

答案 0 :(得分:1)

您可能想看看以下内容:ngFor inside ngFor

基本上,您应该这样写:

toast

然后

*ngFor = "let item of list"

然后使用

*ngFor = "let l of item.list_"

https://stackblitz.com/edit/ngfor-example-pnuhfh

这是一个基于反馈意见的答案示例。

相关代码段为:

<td>{{l.temp.night}}</td>