Правильный формат данных для ngfor - PullRequest
Новая
       30

Правильный формат данных для ngfor

0 голосов
/ 07 июня 2019

Я контролирую конечную точку 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, чтобы что-то вроде этого работало?

Ответы [ 4 ]

1 голос
/ 07 июня 2019

Увидев, что вы хотите от других ответов, вы можете сделать следующее, не используя конвейер значения ключа: Добавьте эту функцию к вашему 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, вот пример стекаблика .

1 голос
/ 07 июня 2019

Вы можете преобразовать объект, построенный из пар ключ-значение, в массив с keyvalue pipe. 

<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

1 голос
/ 07 июня 2019

Ваш объект 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"
      }
    ]
  }
]

Обход будет проще, как это.

1 голос
/ 07 июня 2019

Второй * ngFor вызывает проблему, item - это объект (строка массива объектов mediagrupo), а не массив, вы не можете перебирать его, и вам не нужно(по крайней мере из того, что я вижу)

...