如何解决如何使用Angular将嵌套数据显示到行扩展表中？
ExpandedData(rowData){
this.columnsForExpansion = [
{ field: 'keyName',header: '',width: this.SelectedSystems.length == 1 ?'60%':
this.SelectedSystems.length == 2 ? '52%' : '46%' },{field: 'systemOne',width: this.SelectedSystems.length == 1 ?'40%':
this.SelectedSystems.length == 2 ? '29.5%' : '20%' },{field: 'systemTwo',width: this.SelectedSystems.length == 1 ?'0%':
this.SelectedSystems.length == 2 ? '18.5%' : '19%' },{ field: 'systemThree',width: this.SelectedSystems.length == 1 ?'0%':
this.SelectedSystems.length == 2 ? '0%' : '15%' }
]
if(rowData.name == 'Account Level Data'){
this.AllJsonResponse = []
this.mainResponse.forEach((resp,index) =>{
const propertyValues = Object.values(this.mainResponse[index]["Account-Level"]);
console.log(propertyValues,"MAIN Values") ;
})
this.mainResponse.forEach((resp,index) => {
Object.keys(this.mainResponse[index]["Account-Level"]).forEach(key => {
if(typeof(this.mainResponse[index]["Account-Level"][key][0]) === 'object')
{
this.Innerjson = this.mainResponse[index]["Account-Level"][key][0];
Object.keys(this.mainResponse[index]["Account-Level"][key][0]).forEach(key => {
//this.AllJsonResponse.push(key)
});
console.log(this.ArrayJson,"ArrayJson")
//console.log(this.Innerjson,"OBJECT DATA");
}
else{
var keyObj2 = Object.keys(resp["Account-Level"]);
console.log(keyObj2.length,"LENGTHS");
var keyObj2 = Object.keys(resp);
//// console.log(keyObj2.length,"LENGTHS")
if(!this.AllJsonResponse.includes(key))
{
this.AllJsonResponse.push(key)
// SuperObject.push({"keyName" : key})
}
else if(this.AllJsonResponse.includes(key)){
// this.cart.push(key);
}
}
});
})
this.mainResponse.forEach((resp,index) => {
this.expansionLevel[index] = this.mainResponse[index]["Account-Level"]
this.checekDataVison= this.expansionLevel[index] ;
console.log(this.expansionLevel[index],"dsf");
})
if(this.expansionLevel[1] != ""){
this.hideexpand = false;
}
else{
this.hideexpand = true;
}
// this.mainResponse.forEach((resp,index) => {
// Object.keys(this.mainResponse[index]["Account-Level"]).forEach(key => {
// this.AllJsonResponse.forEach(element =>{
// if(element.keyName == key){
// element.value[index] = this.mainResponse[index][key]
// }
// })
// })
// })
console.log(this.AllJsonResponse)
}
else if(rowData.name == 'Customer Level Data'){
this.AllJsonResponse = []
this.mainResponse.forEach((resp,index) => {
Object.keys(this.mainResponse[index]["Customer-Level"]).forEach(key => {
if(typeof(resp[key]) === 'object')
{
console.log(typeof(resp[key]),"OBJECT DATA")
}
else{
if(!this.AllJsonResponse.includes(key))
{
this.AllJsonResponse.push(key)
// SuperObject.push({"keyName" : key})
}
else if(this.AllJsonResponse.includes(key)){
// this.cart.push(key);
}
}
});
})
this.mainResponse.forEach((resp,index) => {
this.expansionLevel[index] = this.mainResponse[index]["Customer-Level"]
this.checekDataVison= this.expansionLevel[index] ;
console.log(this.checekDataVison,"customer level");
})
}
console.log(this.expansionLevel)
}
this.cols = [
{ field: 'expandButton',width:'10%' },{ field: 'Headers',header: 'Headers',width:'40%' },header: 'ssp Data',width: '30%' },{ field: 'systemTwo',header: 'Vision Data',]
console.log("Vision modal check")
this.SelectedSystems=[0];
this.SelectedSystems.forEach((system,index) => {
if(system == 0){
this.GetService.ComparisonTableCheck().then((resp:any) => {
this.mainResponse[index]= resp.Profile;
// this.loading = false;
this.ErrorVision= false;
this.VisionTable = true;
console.log(this.tableResponse,"this.tableResponse")
},error=>{
this.ErrorVision= true;
})
}
})<p-table class="table table-hover" #dt [columns]="cols" dataKey="index" rowExpandMode="single" [value]="levelsList"
[paginator]="false" [resizableColumns]="false" [scrollable]="true" [rows]="5">
<ng-template pTemplate="header" let-columns>
<table>
<tr class="bg-dark">
<th *ngFor="let col of columns" [ngStyle]="{'width': col.width}" style="border: black;">
<div class="text-center">{{col.header}}</div>
</th>
</tr>
</table>
</ng-template>
<ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns">
<tr class="stripedColours" [pSelectableRow]="rowData">
<td *ngFor="let col of columns; let i = index" [ngClass]="i % 2 == 0 ? 'evenRow':''"
style="word-break:break-all;" [ngStyle]="{'width': col.width}" class="ellipsis"
[ngClass]="expanded ? 'rowBackground' : ''" style="border: 0px;">
<a *ngIf="col.field == 'expandButton'" href="#" [pRowToggler]="rowData">
<i (click)="ExpandedData(rowData)"
[ngClass]="expanded ? 'pi pi-chevron-down' : 'pi pi-chevron-right'"></i>
</a>
<div *ngIf="col.field == 'Headers'" class="text-left font-weight-bold">
<div class="" style="color: #135394;">{{rowData.name}}</div>
</div>
</td>
</tr>
</ng-template>
<ng-template pTemplate="rowexpansion" let-rowData let-columns="columns" let-expanded>
<tr>
<td [attr.colspan]="columns.length + 1" style="padding: 0px; border: 0px;">
<div *ngIf="loadingTaskDetails">
</div>
<div *ngIf="!loadingTaskDetails" class="card">
<div class="card-body">
<p-table #transactionTable class="table" #taskdt [columns]="columnsForExpansion"
[value]="expansionLevel" [paginator]="false" [resizableColumns]="false"
[scrollable]="true" [rows]="5">
<!-- <ng-template pTemplate="header" let-columns>
<table>
<tr style="background-color: white;">
<th *ngFor="let col of columns" [ngStyle]="{'width': col.width}">
<div *ngIf="col.field == 'bpmtaskDescription' || col.field == 'taskInput' || col.field == 'taskOutput'" class="text-center">{{col.header}}</div>
<div *ngIf="col.field != 'bpmtaskDescription' && col.field != 'taskInput' && col.field != 'taskOutput'" class="text-center">{{col.header}}</div>
</th>
</tr>
</table>
</ng-template> -->
<ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns"
let-rowIndex="rowIndex">
<tr class="stripedColours" *ngFor="let item of AllJsonResponse; let i = index;">
<div>
<td *ngFor="let col of columns" [pSelectableRow]="rowData" [ngStyle]="{'width': '40%'}"
style="word-break:break-all;" class="ellipsis">
<div *ngIf="col.field == 'keyName'" class="text-left font-weight-bold" style="padding-left: 40px;">
<div>{{item}}</div>
</div>
<div *ngIf="expansionLevel[0][item] != '' && col.field == 'systemOne'"
class="buttonBackground text-left">
<div>{{expansionLevel[0][item].SERVICE1}}</div>
</div>
<div *ngIf="expansionLevel[0][item] != '' && col.field == 'systemTwo'"
class="buttonBackground text-left">
<div>{{expansionLevel[0][item].Prod1}}</div>
</div>
<!-- <div *ngIf="listofSelectedSystems != null && listofSelectedSystems.length > 2 && col.field == 'systemThree'" class="text-left">
<div>{{expansionLevel[2][item.keyName]}}</div>
</div> -->
</td>
</div>
</tr>
</ng-template>
</p-table>
</div>
</div>
</td>
</tr>
</ng-template>
</p-table>{
"Profile": {
"Account-Level": {
"lec": {
"SERVICE1": "","Prod1": 0
},"Loc": {
"SERVICE1": "2","Prod1": ""
},"TDate": {
"SERVICE1": "1","Prod1": "2"
},"AStartDate": {
"SERVICE1": "01/03/2012","NCount": {
"SERVICE1": "","BillingAddress": [{
"Zip1": {
"SERVICE1": 20001,"Prod1": 15143
},"AddressLine2": {
"SERVICE1": "","Prod1": ""
},"AddressLine1": {
"SERVICE1": "919 AV","Prod1": "200 AV"
},"State": {
"SERVICE1": "DC","Prod1": "PA"
},"First-Name": {
"SERVICE1": "FirsTNAME","Prod1": "TESTCREDIT"
},"Last-Name": {
"SERVICE1": "LASTNAME","Prod1": "WORTHInesS"
},"City": {
"SERVICE1": "WASHINGTON","Prod1": "ALEPPO"
}
} ],"CompanyCode": {
"SERVICE1": "","Prod1": "NPDA"
},"Services": [
{
"ServiceCheck": {
"Status": {
"SERVICE1": "","Prod1": "A"
},"Products": [
{
"23424": {
"SERVICE1": {
"End-Date": "12/31/999","Description": "","Rate-Type": "45"
},"Prod1": {
"End-Date": "12/31/9999","Description": "prod1 res1","Rate-Type": ""
}
}
},{
"r5764": {
"SERVICE1": {
"Status": "","Price": "","Qty": 1,"Prod-Code": "J2000","Pkg-ID": "Y0924","Rate-Type": "45","End-Date": "12/31/999","Product-Type": "","Start-Date": "12/31/9999"
},"Prod1": ""
}
}
]
}
},{
"ServiceImplement": {
"SERVICE1": "","Prod1": {
"Status": "A","Li": "","Products": [
{
"Status": "","Prod-Code": "Q0258","Pkg-ID": "G9699","Rate-Type": "","End-Date": "12/31/9999","Start-Date": "12/31/9999"
},{
"Status": "","Prod-Code": "Q8156","Start-Date": "12/31/9999"
}
],"Service-Address": {
"Zip": 151430000,"AddressLine2": "","AddressLine1": "200 AV","State": "PA","City": "ALHJKEPPO"
}
}
}
}
],"Location-Code": {
"SERVICE1": "","Prod1": 9000
}
},"Customer-Level": {
"Customer-ID": {
"SERVICE1": 345,"Prod1": 3467
},"BillCycle": {
"SERVICE1": "00","Prod1": 24
}
}
}
}我只是没有将深JSON数据放入表中。我怎么能得到这个？
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。