是否可以使用 Angular 5 基于 JSON 对象创建动态表(动态列)?如果是怎么办?
我得到以下 json 作为 API 的响应:
{
"ResponseStatus": true,
"ResponseData": [
{
"Parent": "Company 1",
"Data": [
{
"Field1": "Membership 1",
"Field2": "153.00"
},
{
"Field1": "Membership 2",
"Field2": "130.00"
},
{
"Field1": "Membership 3",
"Field2": "1850.00"
}
]
},
{
"Parent": "Company 2",
"Data": [
{
"Field1": "Membership 1",
"Field2": "148.00"
},
{
"Field1": "Membership 2",
"Field2": "100.00"
},
{
"Field1": "Membership 4",
"Field2": "1800.00"
}
]
}
]
}
现在我想根据这些数据创建表,应该是:
+------------------+------------------+------------------+
| Membership Type | Company 1 | Company 2 |
+------------------+------------------+------------------+
| Membership 1 | 153.00 | 148.00 |
+------------------+------------------+------------------+
| Membership 2 | 130.00 | 100.00 |
+------------------+------------------+------------------+
| Membership 3 | 1850.00 | |
+------------------+------------------+------------------+
| Membership 4 | | 1800.00 |
+------------------+------------------+------------------+
注意:公司数量可能不同。
解决这个问题的最佳方法是什么?我只是想不通如何解决这个问题?非常感谢任何帮助。
这里我使用一些代码作为:
ngOnInit() {
this.headers = this.Testdata.map(t => t.Parent);
this.Testdata.forEach(x => {
x.Data.forEach(y => y['Parent'] = x.Parent)
})
var data = this.Testdata.map(t => t.Data);
var temp = [];
data.forEach(function(a) {
temp.push(a.map(function (t) {
let c = {};
c['Field1'] = t.Field1;
c[t['Parent']] = t.Field2;
return c;
}));
});
var rowList = temp.flat();
}
<table>
<thead>
<tr>
<td *ngFor="let col of headers">{{col}}</td>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of rowData">
<td>{{row.Field1}}</td>
<td *ngFor="let col of headers">
{{row[col]}}
</td>
</tr>
</tbody>
</table>
最佳答案
也许在向表中插入任何内容之前,将 json 转换为您可以在同一个 .ts 文件中声明的自定义对象的数组:
export class CustomObject {
id :string;
company1 :string;
company2 :string;
}
列表:CustomObject[] = [];
然后在主类中声明一个列表并遍历您的 json,比较 id(MembershipType) 的值。如果新的 membershipType 与数组中已有的另一个 membershipType 匹配,则添加 company1 或 company2 的值,否则“将元素推送为 CustomObject”。我希望你能在阅读 json 的同时编写这段代码,它只是两个嵌套的 For :)
关于javascript - 在 Angular 5 中基于 JSON 创建动态表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58060735/