显示角度材质表上的嵌套JSON数据

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>

身份证件
{{element.productId}
部门
{{element.dept}
项目类型
{{element.itemtype}

数据源必须是一个数组（在您的例子中是

产品['items']

）

您需要将

JSON

转换为如下变量：

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

然后需要使用数组

项声明
数据源
，如

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>


身份证件
{{element.productId}
部门
{{element.dept}
项目类型
{{element.itemtype}


我将json文件保存在本地，因此正如我所提到的。那么它是否需要用const jsonData更新呢？对不起，我是新来的，迷路了。请帮助。我的项目在本地的资产文件夹下保存了一个json文件，只是为了确认。@Sz2013，给你。。我将json存储在assets文件夹中，作为
config.json
，然后使用service作为
config.service.ts
，通过http调用json，然后订阅
app.component.ts
，然后检索数据并将其存储到
dataSource
。非常感谢。只是一个问题，似乎没有正确获取“产品”，因为类型“Object”上不存在“Property”products。“此外，我不太了解Hello ts的用法。@Sz2013，您可以将
data.products.items
替换为
data['products'].items
，也请忽略除
应用程序组件和模块之外的所有其他文件
确切的代码实际上仅存在于此应用程序中。。