Javascript JSON中的元素未输出到mat表中

我有一个JSON：

{
    "monthlySusa": [
        [
            {
                "accountlinevaluesId": 1,
                "accountlineId": 1,
                "mandantKagId": 660,
                "mandantAccountsId": 1,
                "period": "7",
                "accountNumber": 27,
                "name": "EDV-Hardware/Software",
                "amount": 55.16859,
                "note": "Ich bin ein Kommentar!",
                "mandantKagAccountEntity": {
                    "mandantKagId": 660,
                    "mandantId": 1,
                    "kagNumber": "2000",
                    "kagText": "A. I. 1. EDV-Software"
                }
            }
        ]
    ],
    "success": true
}

我想在mat表的列中输出金额。我编写了以下函数：

public getOutputAmount() {
    const monthStr = `${this.month}`;
    this.balanceListService.getDataForMonthlyAmount(`${this.year}`, monthStr).subscribe(
      (resp: any) => {
        const data = resp.monthlySusa;
        if (data && data.length > 0) {
          const monthlySusaPeriods = resp.monthlySusa[0];
          const rows = [];
          for (const ac of monthlySusaPeriods) {
            const row = ac.amount;
            rows.push(row);
            console.log('Amount:', ac.amount);
          }
          this.dataSource.data = rows;
        }
      });
  }

我的HTML

<table mat-table [dataSource]="dataSource" [hidden]="!isTableHasData">
              <div *ngFor="let column of displayedColumns; let i = index">
                <ng-container [matColumnDef]="column.attribute" [sticky]="freezeColumn(column.attribute)">
                  <!-- Table-Header -->
                  <th mat-header-cell class="toolbar-bg-second" id="table-header-font-second" *matHeaderCellDef>
                    <div>
                      {{ column.name }}
                    </span>
                    </div>
                  </th>
                  <!-- Table-Content -->
                  <td mat-cell class="table-content-bg-second" id="table-content-font-second" *matCellDef="let row; let i = index;" [ngClass]="{ 'disabled-ranges': column.disabledRanges, 'disabled-assignment': column.disabledAssignment}">
                    <div>
                      {{ column.object  !== null ? row[column.object][column.attribute] : row[column.attribute]  }}
                    </div>
                  </td>
                </ng-container>
              </div>

              <!-- Display columns -->
              <tr mat-header-row class="optimize-header-row"  *matHeaderRowDef="columns; sticky: true"></tr>
              <tr mat-row class="optimize-row" *matRowDef="let row; columns: columns;"></tr>
            </table>

{{column.name}
{{column.object！==null？行[column.object][column.attribute]：行[column.attribute]}

---

我现在的问题是，我得到了控制台输出，但不在表中！请您帮助我，告诉我我做错了什么，或者我应该在代码中改进什么。

请在此处添加您的html代码。可能您是在从服务器请求数据之前呈现表的。我在问题中添加了html代码。我有一个名为this的数组。它包含表中的所有列。最好以Stackblitz为例。我认为这更容易理解stackblitz会很有帮助，谢谢。我在stackblitz中的数据表：