Элемент из JSON не выводится в mat-table

#javascript #json #angular #angular-httpclient #mat-table

#javascript #json #угловой #angular-httpclient #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 amp;amp; 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>
  

Проблема, с которой я столкнулся сейчас, заключается в том, что я получаю вывод на консоль, но не в таблице! Не могли бы вы, пожалуйста, помочь мне и сказать, что я делаю не так или что я должен улучшить в своем коде.

Комментарии:

1. Пожалуйста, добавьте сюда свой html-код. Вероятно, вы визуализируете свою таблицу, прежде чем запрашивать данные с сервера.

2. Я добавил html-код в свой вопрос

3. У меня есть массив, называемый this . Он содержит все столбцы таблицы. Лучше всего сделать пример в Stackblitz. Я думаю, что это более понятно

4. Stackblitz будет полезен, спасибо.

5. Моя таблица данных в stackblitz: stackblitz.com/edit /…