Javascript 如何在Angular中使用json数组创建矩阵表

我需要通过使用Angular比较两个数组对象来创建每个组合的一个矩阵表。我在下面解释我的代码

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

这里有两个数组。我的第一个数组

ColumnNames

值将是表列标题，因此我需要创建如下矩阵

预期输出：：

像上面的格式一样，我需要将数据显示到角度表中。我只需要动态创建矩阵。

尝试如下操作：

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

<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>

{{heading}}
{{color}}
{{size}}

---

一种通用解决方案，可与任何

configArr

一起使用，只要该对象中的所有键都是

string[]

。灵感来自

应用程序组件.ts

从“@angular/core”导入{Component，OnInit}；
@组成部分({
选择器：“我的应用程序”，
templateUrl:“./app.component.html”，
样式URL:[“/app.component.css”]
})
导出类AppComponent实现OnInit{
name=“Angular”；
//在此处注释输入/输出属性以查看表如何更改
configArr={
颜色：[“黑色”、“红色”、“蓝色”、“灰色”]，
尺寸：[“XS”、“S”、“XL”、“XXL”、“M”]，
//价格：[“$5”、“$10”、“$15”]，
//品牌：[“B1”、“B2”、“B3”]
};
//这将是与configArr具有相同属性的[]个对象
矩阵；
所有可能的情况（arr）{
//几乎完全取自链接的代码复查堆栈交换链接
}
恩戈尼尼特（）{
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（“”）；
设obj={}；
对于（设i=0；iIt应该映射为
ColumnNames
值，因为将来可能会有更多的值，所以它需要是动态的。这意味着
ColumnNames
数组的值将是
configArr
的键名。是否希望将其作为
html
表？@IraklisGkougkousis：是的，首先需要形成矩阵，然后我可以将该数组绑定到一个表中。另一个问题，即使
configArr
具有更多属性，您是否只想显示您定义的
ColumnNames
ze

->所以您只想显示

颜色和
大小，对吗？将来可能会有更多的键值。我明白，我在问其他问题。我的意思是，即使
配置arr
有更多键值，您是否只想显示
列名
？请参见我的示例。不，它没有映射到
列名
array。明天可能会有一些新值。你能再解释一下“没有映射到ColumnNames数组”吗？好的，这里
ColumnNames
array的每个值都是
configArr
json对象的键。所以如果我将
subject
添加到
ColumnNames
和
configArr={“颜色”：[“黑色”、“红色”、“蓝色”、“灰色”]，“大小”：[“XS”、“S”、“XL”、“XXL”、“M”]，“主题”：[“数学”、“历史”]}
那么此时会发生什么。
<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>