Отображение вложенных данных JSON в отдельных строках - Angular

Я хочу показать эти данные в отдельных строках, потому что на данный момент они получают все только в одной строке. Я хочу показать "ОТ" из данных JSON

<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" 
                  }
              ]
          }
  }
 }
 ]