在 Angular Material Table 上显示嵌套的 JSON 数据答案

【问题标题】：Display nested JSON data on Angular Material Table在 Angular Material Table 上显示嵌套的 JSON 数据
【发布时间】：2020-03-10 01:57:55
【问题描述】：

Json 文件具有以下格式 -

{
"products": {

    "items":[
      {
        "productId": "1",
        "dept": "home",
        "itemtype": "small"
      },
      {
       "productId": "2",
        "dept": "kitchen",
        "itemtype": "medium"
      }
       ] }}

这是假设显示在材料表上，我可以看到数据已通过控制台显示，但在材料表中不可见。

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" >
<ng-container matColumnDef="productId" >
   <th mat-header-cell *matHeaderCellDef> ID</th>
    <td mat-cell *matCellDef="let element ">{{element.productId}}  
   </td>
 </ng-container>
<ng-container matColumnDef="dept" >
   <th mat-header-cell *matHeaderCellDef> department</th>
    <td mat-cell *matCellDef="let element ">{{element.dept}}  
   </td>
 </ng-container>
 <ng-container matColumnDef="itemtype" >
   <th mat-header-cell *matHeaderCellDef> Item type</th>
    <td mat-cell *matCellDef="let element ">{{element.itemtype}}  
   </td>
 </ng-container>
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
 <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

【问题讨论】：

标签： json angular datatables nested angular-material

【解决方案1】：

您需要将JSON 变成一个变量，例如，

const jsonData = {
"products": {
    "items":[
      {
        "productId": "1",
        "dept": "home",
        "itemtype": "small"
      },
      {
       "productId": "2",
        "dept": "kitchen",
        "itemtype": "medium"
      }
    ] 
  }
}

那么datasource需要用数组items这样声明，

dataSource = jsonData.products.items;

和具有类似属性的 sisplay 列，

  displayedColumns = ['productId', 'dept', 'itemtype'];

以及引用这些属性的HTML 模板，

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <ng-container matColumnDef="productId">
    <th mat-header-cell *matHeaderCellDef> ID </th>
    <td mat-cell *matCellDef="let element"> {{element.productId}} </td>
  </ng-container>

  <ng-container matColumnDef="dept">
    <th mat-header-cell *matHeaderCellDef> department </th>
    <td mat-cell *matCellDef="let element"> {{element.dept}} </td>
  </ng-container>

  <ng-container matColumnDef="itemtype">
    <th mat-header-cell *matHeaderCellDef> Item type </th>
    <td mat-cell *matCellDef="let element"> {{element.itemtype}} </td>
  </ng-container>


  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

Working material table Stackblitz

【讨论】：

我在本地保存了 json 文件，因此正如我所提到的。那么它需要用 const jsonData 更新吗？对不起，但我是全新的，迷路了。请帮忙。
我的项目有一个json文件本地保存在assets文件夹下，只是为了确认一下。
@Sz2013, 你去stackblitz.com/edit/… .. 我已经将json存储在assets文件夹中作为config.json然后使用服务作为config.service.ts并通过http调用json然后订阅app.component.ts然后检索数据并将其存储到dataSource ..
非常感谢。只是一个问题，它似乎没有正确获得“产品”，因为“对象”类型上不存在属性“产品”。另外我不太明白Hello ts的用法。
@Sz2013，您可以将data.products.items 替换为data['products'].items，并且请忽略除app component and module 之外的所有其他文件。确切的代码实际上仅存在于此应用中..

【解决方案2】：

dataSource 必须是一个数组（在您的情况下是 products['items']）。

【讨论】：