[英]How to display nested json arrays into html table with material angular
I am trying to display a nested json array into my material angular table.我正在尝试将嵌套的 json 数组显示到我的材料 angular 表中。 My data works fine if my json does not have nested arrays.
如果我的 json 没有嵌套的 arrays,我的数据工作正常。
Json Json
{
"rows": [
{
"mst": {
"field": "createDate",
"value": "2017-06-02"
},
"gsc": {
"field": "Account/Audit/Creation/Date",
"value": "2017-06-02"
}
},
{
"mst": {
"field": "startDate"
},
"gsc": {
"field": "startDate"
}
},
{
"mst": {
"field": "status",
"value": "ACTIVE"
},
"gscs": [
{
"field": "Account/LineOfBusiness/Type~Status",
"value": "C~A"
},
{
"field": "Account/LineOfBusiness/Type~Status",
"value": "I~A"
}
],
"gscvalue": "Active"
},
{
"mst": {
"field": "statusDate"
},
"gsc": {
"field": "statusDate"
}
},
{
"mst": {
"field": "statusReason"
},
"gsc": {
"field": "statusReason"
}
},
{
"mst": {
"field": "deliveryMethod",
"value": "PAPER"
},
"gscs": [
{
"field": "Electronic",
"value": "N"
},
{
"field": "ElectronicOutsourced",
"value": "N"
},
{
"field": "Hardcopy",
"value": "Y"
}
],
"gscvalue": "Paper"
},
{
"mst": {
"field": "statementFormat",
"value": "Standard"
},
"gsc": {
"field": "?"
}
},
{
"mst": {
"field": "statementLanguagePreference",
"value": "Spanish"
},
"gsc": {
"field": "Account/Language",
"value": "S"
},
"gscvalue": "Spanish"
},
{
"mst": {
"field": "type",
"value": "RES"
},
"gsc": {
"field": "Account/Type",
"value": "RES"
}
}
]
}
HTML HTML
<div class="example-container mat-elevation-z8" *ngIf="rows?.length>0">
<table mat-table [dataSource]="dataSource">
<ng-container matColumnDef="mst Fields">
<th mat-header-cell *matHeaderCellDef> mst Fields </th>
<td mat-cell *matCellDef="let row" class="tablePadding"> {{row.mst.field}} </td>
</ng-container>
<ng-container matColumnDef="mst">
<th mat-header-cell *matHeaderCellDef> mst value </th>
<td mat-cell *matCellDef="let row"> {{row.mst.value}} </td>
</ng-container>
<ng-container matColumnDef="gsc Fields">
<th mat-header-cell *matHeaderCellDef> gsc Fields </th>
<td mat-cell *matCellDef="let row"> {{row.gsc.field}} </td>
</ng-container>
<ng-container matColumnDef="gsc">
<th mat-header-cell *matHeaderCellDef> gsc value </th>
<td mat-cell *matCellDef="let row"> {{row.gsc.value}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns; let row"></tr>
modal.ts模态的.ts
export class ResultField {
field: string;
value: string;
valueList: string[];
}
export class ResultRow {
mst: ResultField;
gsc: ResultField;
gscs: ResultField[];
gscValue: String;
}
My current table will display data all the way up until it reaches mst.field{status}.我当前的表将一直显示数据,直到达到 mst.field{status}。 I get an error
我收到一个错误
SystemComponent.html:29 ERROR TypeError: Cannot read property 'field' of undefined
I understand this error is coming because of my current logic in my html.我知道这个错误的出现是因为我的 html 中的当前逻辑。 How can I resolve this?
我该如何解决这个问题?
Hence, I don't want gscs.field in a separate column I want those values into gsc.field column and the gscValue in the gsc.value column.因此,我不希望 gscs.field 在单独的列中,我希望将这些值放入 gsc.field 列和 gsc.value 列中的 gscValue 。
Attempt试图
<ng-container matColumnDef="gsc Fields">
<th mat-header-cell *matHeaderCellDef> gsc Fields </th>
<td mat-cell *matCellDef="let row" *ngIf="row.gsc.field"> {{row.gsc.field}} </td>
<td mat-cell *matCellDef="let row" *ngIf="row.gsc.field"> {{row.gscs.field}} </td>
</ng-container>
But with angular logic there can only be one * directives in a tag.但是对于 angular 逻辑,标签中只能有一个 * 指令。
My closest reference is Need to display Nested JSON Object in Material Data Table but there were no solid answers.我最接近的参考是需要在材料数据表中显示嵌套 JSON Object但没有可靠的答案。
Attempt 2尝试 2
I tried using a simpler approach just to get my data printed.我尝试使用更简单的方法来打印我的数据。
<div>
<h1>Testing</h1>
<div *ngFor="let row of rows">
<!-- <p *ngIf="row.gsc.field">{{row.gsc.field}}</p>
<p *ngIf="row.gsc.value">{{row.gsc.value}}</p> -->
<p>{{row.mst.field}}</p>
<p>{{row.mst.value}}</p>
<div *ngFor= "let gscs of row.gscs">
<p *ngIf="gscs.field">{{gscs.field}}</p>
<p *ngIf="gscs.value">{{gscs.value}}</p>
</div>
<p *ngIf = "row.gscvalue">{{row.gscvalue}}</p>
</div>
</div>
With this code snippet, I am able to pull the nested values however I am getting the same error as above when I uncomment these two lines.使用此代码片段,我可以提取嵌套值,但是当我取消注释这两行时,我得到与上面相同的错误。
<!-- <p *ngIf="row.gsc.field">{{row.gsc.field}}</p>
<p *ngIf="row.gsc.value">{{row.gsc.value}}</p> -->
ERROR TypeError: Cannot read property 'field' of undefined错误类型错误:无法读取未定义的属性“字段”
With the JSON I provided above, I want to create a table that looks like this following picture.使用上面提供的 JSON,我想创建一个如下图所示的表。
seems like you just need to nest your ngIf
:好像你只需要嵌套你的
ngIf
:
<ng-container matColumnDef="gsc Fields">
<th mat-header-cell *matHeaderCellDef> gsc Fields </th>
<td mat-cell *matCellDef="let row">
<ng-container *ngIf="row.gsc?.field; else fieldArray">
{{row.gsc.field}}
</ng-container>
<ng-template #fieldArray>
<div class="sub-cell" *ngFor="let field of row.gscs"> <!-- need the appropriate css -->
{{field.field}} {{field.value}}
</div>
</ng-template>
</td>
</ng-container>
and in your value column you want more like:在你的价值列中,你想要更多:
<ng-container matColumnDef="gsc">
<th mat-header-cell *matHeaderCellDef> gsc value </th>
<td mat-cell *matCellDef="let row"> {{row.gsc?.value || row.gscvalue}} </td>
</ng-container>
not sure this is 100% but should be close不确定这是 100%,但应该接近
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.