Как создать матричную таблицу, используя массив json в Angular

Question

Мне нужно создать одну матричную таблицу каждой комбинации, сравнивая два объекта массива, используя Angular. Я объясняю мой код ниже.

ColumnNames= ["Colour", "Size"];
configArr={
  "Colour":["Black", "Red", "Blue","Grey"],
  "size": ["XS","S","XL","XXL","M"]
}

Здесь у меня есть два массива. Мой первый массив ColumnNames значений будет заголовком столбца таблицы, и, соответственно, мне нужно создать матрицу, как показано ниже.

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

Colour        Size

 Black          XS
 Black           S
 Black          XL
 Black         XXL
 Black          M
 Red           XS
 Red            S
 Red           XL
 Red           XXL
 Red            M

.................
................
................

Мне нравится В приведенном выше формате мне нужно отобразить данные в таблицу angular. Мне нужно только создать матрицу динамически.

Answer 1

Универсальное c решение, которое работает с любым configArr, если все ключи в этом объекте string[]. Вдохновленный этим .

app.component.ts

import { Component, OnInit } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
  name = "Angular";

  // Comment in/out properties here to see how the table changes
  configArr = {
    Colour: ["Black", "Red", "Blue", "Grey"],
    Size: ["XS", "S", "XL", "XXL", "M"],
    //Price: ["$5", "$10", "$15"],
    //Brand: ["B1", "B2", "B3"]
  };

  // This will be an [] of objects with the same properties as configArr
  matrix;

  allPossibleCases(arr) {
    // Taken almost exactly from the linked code review stack exchange link
  }

  ngOnInit() {
    const configKeys = Object.keys(this.configArr);
    const arrOfarrs = configKeys.map(k => this.configArr[k]);
    const result = this.allPossibleCases(arrOfarrs);
    this.matrix = result.map(r => {
      const props = r.split(' ');
      let obj = {};
      for(let i=0;i<props.length;i++) {
        obj[configKeys[i]] = props[i]
      }
      return obj;
    });
  }
}

app.component. html

<table>
  <thead>
    <tr>
      <th *ngFor="let kv of configArr | keyvalue">{{ kv.key }}</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let elem of matrix">
      <td *ngFor="let kv of elem | keyvalue">{{ kv.value }}</td>
    </tr>
  </tbody>
</table>

Stackblitz .

Также см. this для алгоритма позади него.

Answer 2

Попробуйте так:

<table>
    <tr>
        <th *ngFor="let heading of ColumnNames"> {{heading}} </th>
    </tr>
    <ng-container *ngFor="let color of configArr.Colour">
        <tr *ngFor="let size of configArr.size">
            <td>{{color}}</td>
            <td>{{size}}</td>
        </tr>
    </ng-container>
</table>

Рабочая демоверсия

Answer 3

configArr.Colour.forEach((color) => {
  configArr.size.forEach((size) =>{
    console.log(color ,"  ", size); // Change this according to your table
  })
})