如何使用材料角度将嵌套的json数组显示到html表中

Posted 2023-03-05

【中文标题】如何使用材料角度将嵌套的json数组显示到html表中

【英文标题】：How to display nested json arrays into html table with material angular

【发布时间】：2020-07-23 15:32:41

【问题描述】：

我正在尝试在我的材质角度表中显示一个嵌套的 json 数组。如果我的 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

<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

export class ResultField 
field: string;
value: string;
valueList: string[];


export class ResultRow 
mst: ResultField;
gsc: ResultField;
gscs: ResultField[];
gscValue: String;

我的当前表格将一直显示数据，直到达到 mst.fieldstatus。我收到一个错误

SystemComponent.html:29 ERROR TypeError: Cannot read property 'field' of undefined

我知道这个错误是因为我的 html 中的当前逻辑。我该如何解决这个问题？

因此，我不希望 gscs.field 在单独的列中，我希望将这些值放入 gsc.field 列中，并将 gscValue 放入 gsc.value 列中。

尝试

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

但是对于角度逻辑，标签中只能有一个 * 指令。

我最接近的参考是Need to display Nested JSON Object in Material Data Table 但没有可靠的答案。

尝试 2

我尝试使用更简单的方法来打印我的数据。

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

使用这段代码 sn-p，我可以提取嵌套值，但是当我取消注释这两行时，我得到了与上面相同的错误。

<!-- <p *ngIf="row.gsc.field">row.gsc.field</p>
<p *ngIf="row.gsc.value">row.gsc.value</p> -->

错误类型错误：无法读取未定义的属性“字段”

使用上面提供的 JSON，我想创建一个如下图所示的表。

【问题讨论】：

那么当有一个数组时，你想要多个单元格来表示它吗？

@bryan60 是的。这是正确的。只有当我们不能在同一个单元格中设置 gscs.field 和 gscs.value 时，它​​才可以是 gscs.field。

【参考方案1】：

似乎你只需要嵌套你的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>

在你的价值列中你想要更多：

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

不确定这是 100%，但应该接近

【讨论】：

谢谢布莱恩！你是生命的救星！这有很大帮助。计时器到时将为您提供赏金。