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

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