Question

我想在单独的行中显示此数据，因为当它们仅在1行中全部获得时。我想显示JSON数据中的“ FROM”

<ng-container matColumnDef="from">
    <mat-header-cell *matHeaderCellDef> From </mat-header-cell>
      <mat-cell *matCellDef="let element">
        <tr>{{element.computationrates[0].ratebands[0].from}}</tr>
        <tr>{{element.computationrates[0].ratebands[1].from}}</tr>
        <tr>{{element.computationrates[0].ratebands[2].from}}</tr>
        <tr>{{element.computationrates[0].ratebands[3].from}}</tr>
      </mat-cell>
  </ng-container>

有人可以告诉我如何编辑此代码以使它们显示在不同的行中

JSON数据

        [
     {
  "yearlyincentive": {
      "incentive": {
          "number": "0",
          "description": "null"
      },
      "year": "2016"
  },
  "computationrates": {
          "0": {
              "computation": "0",
              "ratetype": "0",
              "ratebands": [
                  {
                      "from": "0",
                      "to": "8,000",
                      "percent": "15%",
                      "subtract": "100" 
                  },
                  {
                      "from": "8,000",
                      "to": "15,000",
                      "percent": "20%",
                      "subtract": "250" 
                  },
                  {
                      "from": "15,000",
                      "to": "25,000",
                      "percent": "25%",
                      "subtract": "500" 
                  },
                  {
                      "from": "25,000",
                      "to": "50,000",
                      "percent": "35%",
                      "subtract": "1000" 
                  }
              ]
          }
  }
 }
 ]

Error Image

Answer 1

当您要遍历费率范围时，应将其作为columnDef：

<ng-container matColumnDef="from">
  <th mat-header-cell *matHeaderCellDef> From </th>
  <td mat-cell *matCellDef="let rateband">{{rateband.from}}</td>
</ng-container>

好吧，我想您知道了。您的dataSource2是一个只有一个对象的数组，具有属性yearlyincentive和computationrates。要在不同的行中显示费率范围，您需要将其作为数据源提供给表。因此，要么编辑您的.ts文件：

// previous: 
dataSource2 = new MatTableDataSource(ELEMENT_DATA_DETAILS);
// now:
dataSource2 = new MatTableDataSource(ELEMENT_DATA_DETAILS.computationrates["0"].ratebands);

或编辑您的html：

<!-- previous: -->
<mat-table #table [dataSource]="dataSource2" matSort>
<!-- now: -->
<mat-table #table [dataSource]="dataSource2.computationrates['0'].ratebands" matSort>

然后使用答案顶部的columnDef。

在单独的行中显示嵌套的JSON数据-Angular4

1 个答案: