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

Question

我正在尝试将嵌套的 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"    },

Answer 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% 但应该很接近