Angular, REST-API Json Объект, Спецификация доступа c Массив с подобъектами - PullRequest
Новая
       3

Angular, REST-API Json Объект, Спецификация доступа c Массив с подобъектами

0 голосов
/ 27 февраля 2020

У меня есть следующая проблема в моем Angular проекте. Я получаю следующие данные (пример данных) из нашего API: 

    {
  "plant": [
    {
      "workplateId": 0,
      "workplaceTypeId": 0,
      "description": "string",
      "aktiveOrder": 0,
      "spsActive": true,
      "plantActive": true,
      "plantStatus": 0,
      "orderManagementActive": true,
      "Cycle": 0
    },
    {
      "workplateId": 1,
      "workplaceTypeId": 0,
      "description": "string",
      "aktiveOrder": 0,
      "spsActive": false,
      "plantActive": false,
      "plantStatus": 0,
      "orderManagementActive": true,
      "Cycle": 0
    }
  ],
  "productFig": {
    "earlyShift": [
      {
        "plantId": 0,
        "shiftId": "string",
        "quant101": 0,
        "sqm101": 0,
        "quant531": 0,
        "sqm531": 0,
        "quant532": 0
      },
      {
        "plantId": 1,
        "shiftId": "string",
        "quant101": 100,
        "sqm101": 1000,
        "quant531": 0,
        "sqm531": 0,
        "quant532": 0
      }
    ],
    "lateShift": [
      {
        "plantId": 0,
        "shiftId": "string",
        "quant101": 0,
        "sqm101": 0,
        "quant531": 0,
        "sqm531": 0,
        "quant532": 0
      },
      {
        "plantId": 1,
        "shiftId": "string",
        "quant101": 2000,
        "sqm101": 20000,
        "quant531": 0,
        "sqm531": 0,
        "quant532": 0
      }
    ],
    "nightShift": [
      {
        "plantId": 0,
        "shiftId": "string",
        "quant101": 0,
        "sqm101": 0,
        "quant531": 0,
        "sqm531": 0,
        "quant532": 0
      }
    ]
  }
}

Я храню данные в свойстве типа Data []. Тип данных является интерфейсом. Это работает без проблем, и я могу получить доступ ко всем данным здесь, в моем component.ts: 

 this.store.pipe(select(getAllData)).
     subscribe(data => {
       this.data = data;
      console.log(data);
     });

Но когда я пытаюсь получить к нему доступ в моем html, я получаю следующую ошибку:

Ошибка: ошибка при попытке diff '[object Object]'. Разрешены только массивы и итерации

Моя реализация: 

<ov-plant *ngFor="let p of data"></ov-plant>

Мне нужен доступ к массиву растений из данных, поэтому первый массив из данных. Это может быть простой вопрос для вас, ребята, но я надеюсь, что кто-нибудь может мне помочь:).

Заранее спасибо!

Ответы [ 3 ]

2 голосов
/ 27 февраля 2020

Это потому, что ваши данные - это объект, и вы не можете перебрать объект. Вам нужно указать массив внутри него. Например: 

<ov-plant *ngFor="let p of data['plant']"></ov-plant>
0 голосов
/ 27 февраля 2020

Вы можете присоединиться к массиву данных с помощью pluck. С ним вы будете хранить всю информацию о типах, и вам не придется делать какие-либо логи c в вашем html. 

this.store.pipe(
  select(getAllData),
  pluck('plant')
).subscribe(value => this.data = value);
0 голосов
/ 27 февраля 2020

Вы должны установить this.data для рассматриваемого массива.

Попробуйте: 

this.store.pipe(select(getAllData)).
     subscribe(data => {
       this.data = data.plant;
      console.log(data);
     })
...