Перечислять несколько блоков выбора из одного массива - NgFor. - PullRequest
Новая
       9

Перечислять несколько блоков выбора из одного массива - NgFor.

0 голосов
/ 25 октября 2018

Вот что я хочу сделать.У меня есть массив объектов, подобных этому .. 

[
{productOptionId: 1, value: "Black"},
{productOptionId: 1, value: "Red"},
{productOptionId: 2, value: "UK 43"},
{productOptionId: 2, value: "FIJI 1"},
]

Я хочу сгруппировать элементы этого массива на основе 'productOptionId' и отобразить поля выбора на основе этих групп.А также используйте эти подмассивы для отображения параметров соответствующих полей выбора.

Код машинописного текста: 

var i=0;
var result = [];

  var object = [];
  var objects = [
{productOptionId: 1, value: "Black"},
{productOptionId: 1, value: "Red"},
{productOptionId: 2, value: "UK 43"},
{productOptionId: 2, value: "FIJI 1"},
];
  var k = -1;
  for (var i = 0; i < objects.length; i++){
    if(k!=objects[i].productOptionId){
      k = objects[i].productOptionId;
      object = []
      object.push(objects[i]);
      result.push(Array.from(object));
    }else{
      object.push(objects[i]);
    }
  }

this.allOptionValues = Array.from(result);

Код HTML: 

<p *ngFor="let productOption of allOptionValues" >
  <select >
    <option   *ngFor="let optionValue of productOption.values" >{{optionValue.value}}</option>
  </select>
</p>

Ожидаемый результат:

enter image description here

1 Ответ

0 голосов
/ 25 октября 2018

html 

<p *ngFor="let productOption of allOptionValues | keyvalue">
    <select>
        <option   *ngFor="let optionValue of productOption.value" >{{optionValue.value}}</option>
    </select>
</p>

ts 

constructor() {
    this.makeProductGroup();
}

makeProductGroup() {
    var objects = [
        {productOptionId: 1, value: "Black"},
        {productOptionId: 1, value: "Red"},
        {productOptionId: 2, value: "UK 43"},
        {productOptionId: 2, value: "FIJI 1"},
    ];
    const newProductArray = {};
    const uniqueProductId = [];

    for (var i = 0; i < objects.length; i++) {
        if (uniqueProductId.indexOf(objects[i].productOptionId) === -1) {
            uniqueProductId.push(objects[i].productOptionId);
            newProductArray[objects[i].productOptionId] = [];
        }
        newProductArray[objects[i].productOptionId].push(objects[i]);
    }
    this.allOptionValues = newProductArray;    
}

Функция makeProductGroup () создает объект OBJECT, как показано ниже одного, поэтому мы используем канал ключевого значения для цикла в объекте. 

{
  "1": [
    {
      "productOptionId": 1,
      "value": "Black"
    },
    {
      "productOptionId": 1,
      "value": "Red"
    }
  ],
  "2": [
    {
      "productOptionId": 2,
      "value": "UK 43"
    },
    {
      "productOptionId": 2,
      "value": "FIJI 1"
    }
  ]
}
...