Json 在mat表格中正确显示以动态列分组的数据列表
不幸的是,我有一个无法解决的问题 我的API向我返回如下数据列表:Json 在mat表格中正确显示以动态列分组的数据列表,json,angular,typescript,angular-material,mat-table,Json,Angular,Typescript,Angular Material,Mat Table,不幸的是,我有一个无法解决的问题 我的API向我返回如下数据列表: [ {grade: "Grade A", id: 1, ifsGrade: "A1XX", ifsType: "01XX", points: 22, type: "Type_1"}, {grade: "Grade B", id: 2, ifsGrade: "B1XX", ifsType: "0
[
{grade: "Grade A", id: 1, ifsGrade: "A1XX", ifsType: "01XX", points: 22, type: "Type_1"},
{grade: "Grade B", id: 2, ifsGrade: "B1XX", ifsType: "02XX", points: 15, type: "Type_1"},
{grade: "Grade C", id: 3, ifsGrade: "C1XX", ifsType: "03XX", points: 1, type: "Type_1"},
{grade: "Grade A", id: 4, ifsGrade: "A2XX", ifsType: "04XX", points: 23, type: "Type_2"},
{grade: "Grade B", id: 5, ifsGrade: "B2XX", ifsType: "05XX", points: 26, type: "Type_2"}
]
Array.prototype.groupBy = function(k) {
return this.reduce((acc, item) => (acc[item[k]] = [...(acc[item[k]] || []), item], acc), {});
};
var TABLE_DATA = Object.values(API_DATA.groupBy("type"));
[
[
{grade: "Grade A", id: 1, ifsGrade: "A1XX", ifsType: "01XX", points: 22, type: "Type_1"},
{grade: "Grade B", id: 2, ifsGrade: "B1XX", ifsType: "02XX", points: 15, type: "Type_1"},
{grade: "Grade C", id: 3, ifsGrade: "C1XX", ifsType: "03XX", points: 1, type: "Type_1"}
],
[
{grade: "Grade A", id: 4, ifsGrade: "A2XX", ifsType: "04XX", points: 23, type: "Type_2"},
{grade: "Grade B", id: 5, ifsGrade: "B2XX", ifsType: "05XX", points: 26, type: "Type_2"}
]
]
我按类型对数据进行分组,如下所示:
[
{grade: "Grade A", id: 1, ifsGrade: "A1XX", ifsType: "01XX", points: 22, type: "Type_1"},
{grade: "Grade B", id: 2, ifsGrade: "B1XX", ifsType: "02XX", points: 15, type: "Type_1"},
{grade: "Grade C", id: 3, ifsGrade: "C1XX", ifsType: "03XX", points: 1, type: "Type_1"},
{grade: "Grade A", id: 4, ifsGrade: "A2XX", ifsType: "04XX", points: 23, type: "Type_2"},
{grade: "Grade B", id: 5, ifsGrade: "B2XX", ifsType: "05XX", points: 26, type: "Type_2"}
]
Array.prototype.groupBy = function(k) {
return this.reduce((acc, item) => (acc[item[k]] = [...(acc[item[k]] || []), item], acc), {});
};
var TABLE_DATA = Object.values(API_DATA.groupBy("type"));
[
[
{grade: "Grade A", id: 1, ifsGrade: "A1XX", ifsType: "01XX", points: 22, type: "Type_1"},
{grade: "Grade B", id: 2, ifsGrade: "B1XX", ifsType: "02XX", points: 15, type: "Type_1"},
{grade: "Grade C", id: 3, ifsGrade: "C1XX", ifsType: "03XX", points: 1, type: "Type_1"}
],
[
{grade: "Grade A", id: 4, ifsGrade: "A2XX", ifsType: "04XX", points: 23, type: "Type_2"},
{grade: "Grade B", id: 5, ifsGrade: "B2XX", ifsType: "05XX", points: 26, type: "Type_2"}
]
]
我希望能够在有角度的材质垫表中显示数据,如下所示:
所以我的数据源有一个列表,但是这个列表的元素也是列表。所以我不知道如何正确显示项目
因此,对于表列,您需要这样的动态内容,但我不知道如何:
<ng-container matColumnDef="{{column}}" *ngFor="let column of definedColumns">
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
<td mat-cell *matCellDef="let element"> {{element[column]}} </td>
</ng-container>
{{column}}
{{元素[列]}}
Stackblitz链接
感谢您的帮助您需要迭代数据并将不同的值映射到新对象 下面是一个工作堆栈示例 以及stackblitz的相关功能
convertedData:ElementType[];
//从“X级”创建“X级”
convertGradeToGradeKey(等级:字符串):字符串{
返回`grade${grade.split(“”[1]}`;
}
//可能也值得正确键入此“数据”。。。
mapDataFromApi(数据:任意[]):无效{
//使用映射,这样我们就不必每次迭代整个列表来查找type==“someType”
设mappedData=newmap();
data.forEach(val=>{
//从映射中获取现有值,如果没有,则创建一个“新”值
让currentVal=mappedData.get(val.type)|{type:val.type,gradeA:undefined,gradeB:undefined,gradeC:undefined};
//从字符串值中获取“等级键”
const gradeKey=this.convertGradeToGradeKey(val.grade);
//获取新值,即当前值+此行的“点”
const newGradeValue:number=(currentVal[gradeKey]| | 0)+val.points;
//将当前值对象与新属性合并
currentVal={…currentVal,[gradeKey]:newGradeValue};
//将集合中的值相加
mappedData.set(val.type,currentVal);
})
//从映射的数据创建普通数组
this.convertedData=[…mappedData].map([key,val])=>val);
}
通过类型分组的数据初始化:
ngOnInit() {
this.API_DATA = [
{grade: "Grade A", id: 1, ifsGrade: "A1XX", ifsType: "01XX", points: 22, type: "Type_1"},
{grade: "Grade B", id: 2, ifsGrade: "B1XX", ifsType: "02XX", points: 15, type: "Type_1"},
{grade: "Grade C", id: 3, ifsGrade: "C1XX", ifsType: "03XX", points: 1, type: "Type_1"},
{grade: "Grade A", id: 4, ifsGrade: "A2XX", ifsType: "04XX", points: 23, type: "Type_2"},
{grade: "Grade B", id: 5, ifsGrade: "B2XX", ifsType: "05XX", points: 16, type: "Type_2"}
];
const key = 'type'
const dataTable = Object.values(this.API_DATA.reduce((acc, item) => (acc[item[key]] = [...(acc[item[key]] || []), item], acc), {}));
this.dataSource = dataTable;
}
mat table
带动态柱的角材料:
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<ng-container matColumnDef="{{column}}" *ngFor="let column of definedColumns; let index = index;">
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
<td mat-cell *matCellDef="let elements">
<span *ngFor="let element of elements; let first = first;">
<span *ngIf="index == 0 && first">{{element.type}}</span>
<span *ngIf="element.grade == column">{{element.points}}</span>
</span>
</td>
</ng-container>
<ng-container matColumnDef="action">
<th mat-header-cell *matHeaderCellDef class="text-right">
<button mat-icon-button (click)="log('add')">
<mat-icon color="accent">add_circle_outline</mat-icon>
</button>
</th>
<td mat-cell *matCellDef="let gradingIndex" class="text-right">
<button mat-icon-button>
<mat-icon color="primary" (click)="log(gradingIndex)">edit</mat-icon>
</button>
<button mat-icon-button (click)="log(gradingIndex)">
<mat-icon color="warn">delete</mat-icon>
</button>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
{{column}}
{{element.type}
{{element.points}}
添加_圆_轮廓
编辑
删除
结果:
Stackblitz:你看过吗?我想这可能会有帮助:谢谢你的回答,我修改了我的帖子。我不想修改对象,因为我需要所有属性来修改或删除它们。所以我找到了一个解决方案,在列表中按类型对它们进行分组。但是表中的显示很复杂,很抱歉,我不太明白你现在在更新中想做什么。如果要在表中显示数据,它需要是单个数组。您最初发布的是一个聚合表,但现在我不确定它是什么。如果要在所需的表中显示它们,您需要执行类似于I的操作。如果你看我的stackblitz,我不会修改原始数据,如果你需要更新原始数据,原始数据仍然在不同的变量中。不确定添加/删除按钮会做什么,因为行不知道您要更新的原始值。表中显示的数据没有所有原始属性(id、ifsType…)。我需要它来编辑和删除,因为数据库中有几行会受到影响。这就是为什么我这次用按“类型”分组的数据修改了我的帖子。因此,表的每一行都是一个数据列表,但只包含某些值应在正确的列中显示。在我想要修改行时发布的答案中,我将检索与类型对应的所有数据的列表,以便能够修改或删除它们。