如何使用材料将对象显示到数据表中？

Question

这是我的对象

[{
  "Element": 
  [
    {
      "name": "Hydrogen",
      "position":1,
      "symbols": [{"symbol": "H","Weight": "1.5"}]

    },
    {
      "position":2,
      "name": "Helium",
      "symbols": [{"symbol": "He",  "Weight": "3.2"}]
    },
    {
      "position":3,
      "name": "Lithium",
      "symbols": [{"symbol": "Li","Weight": "9.2" }]
    }
 ]
} ]

我想将上面的对象显示到我在这里尝试过的数据表中，但它没有显示数据

demo

它显示的是空表

Answer 1

您的数据错误，您在数组中使用数组并将其作为普通对象访问

<ng-container matColumnDef="symbol">
    <mat-header-cell *matHeaderCellDef> Symbol </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.symbol[0].symbol}} </mat-cell>
</ng-container>

修改数据：

const ELEMENT_DATA: Element[] =
  [
    {
      "name": "Hydrogen",
      "position": 1,
      "symbol": [
        {
          "symbol": "H",
          "Weight": "1.5"
        }]

    },
    {
      "position": 2,
      "name": "Helium",
      "symbols": [
        {
          "symbol": "He",
          "Weight": "3.2"
        }]
    },
    {
      "position": 3,
      "name": "Lithium",
      "symbols": [
        {
          "symbol": "Li",
          "Weight": "9.2"
        }]
    }];

更新StackBlitz