Question

我控制api端点，因此我可以以所需的最佳方式格式化接收到的json，因此不必过多地操作json。我将这些数据块作为对象存储在变量中：

mediagrupo= [{
    "2019-06": [{
        "id_formulario": "4",
        "media": "7.6800"
    }],
    "2019-05": [{
        "id_formulario": "1",
        "media": "7.2031"
    }, {
        "id_formulario": "2",
        "media": "8.0459"
    }, {
        "id_formulario": "3",
        "media": "7.7752"
    }, {
        "id_formulario": "4",
        "media": "8.4800"
    }],
    "2019-04": [{
        "id_formulario": "2",
        "media": "6.0000"
    }]
}]

我想要的是这样的

<tr *ngFor="let item of mediagrupo">
    <ng-container *ngFor="let form of item">
        <td>{{ form["media"] }}</td>
    </ng-container>
</tr>

但是我要么得到一个错误，那就是它不是正确的类型，它是未定义的……json的正确结构将是什么使这种工作正常？

Answer 1

第二个* ngFor引起了问题，item是一个对象（对象mediagrupo的数组的行），而不是数组，您无法对其进行迭代，并且您不会不需要（至少从我所看到的）

Answer 2

您可以使用keyvalue管道将由键值对构建的对象转换为数组。

<tr *ngFor="let item of mediagrupo">
    <ng-container *ngFor="let form of (item | keyvalue)">
        <td>{{ form.key }}</td>
        <td>{{ form.value }}</td>
...

https://angular.io/api/common/KeyValuePipe

Answer 3

您的Json对象正确，但是您没有正确绑定该对象。由于变量“ item” (*ngFor="let item of mediagrupo") 是键值对，而不是数组或对象 ，因此您无法再次遍历它。首先，您将必须获取特定“项目”的值，然后才能生效。

此行导致您遇到问题- <td>{{ form["media"] }}</td>

您可以做类似的事情-

<tr  *ngFor="let month of mediaGroup">
    <td *ngFor="let m of month['2019-06']"> // here I am refering to paricular key-value
       {{m.media}}
    </td>
</tr>

希望这会有所帮助。但是，我更改了变量名称。

同样，您可以修改json数组，例如-

 [
  {
    "month": "2019-05",
    "medias": [
      {
        "id_formulario": "1",
        "media": "7.2031"
      }
    ]
  },
  {
    "month": "2019-06",
    "medias": [
      {
        "id_formulario": "1",
        "media": "7.2031"
      },
      {
        "id_formulario": "2",
        "media": "8.0459"
      }
    ]
  }
]

这样遍历会更容易。

Answer 4

查看其他答案后，您可以执行以下操作而无需使用键值管道：将此功能添加到您的TS：

getKeys(item: any){
  return Object.keys(item);
}

这将返回一个包含对象内所有键的数组，我们将使用这些键在HTML中完成其余操作：

<div *ngFor="let item of mediagrupo">
    <p *ngFor="let key of getKeys(item)">
      {{key}}
      <span *ngFor="let child of item[key]">
        {{child.media}}
      </span>
    </p>
</div>

为简单起见，我使用了div和p，将它们更改为tr和td， here's a stackblitz example 。

ngfor的正确数据格式

4 个答案: