如何使用Angular计算表列的总和并显示在页脚？

<!-- 组件模板 -->
<table>
  <thead>
    <tr>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of data">
      <td><input type="number" [(ngModel)]="item.column1"></td>
      <td><input type="number" [(ngModel)]="item.column2"></td>
      <td><input type="number" [(ngModel)]="item.column3"></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">总和: {{ totalSum }}</td>
    </tr>
  </tfoot>
</table>

// 组件类
import { Component } from '@angular/core';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.css']
})
export class TableComponent {
  data = [
    { column1: 1, column2: 2, column3: 3 },
    { column1: 4, column2: 5, column3: 6 },
    { column1: 7, column2: 8, column3: 9 }
  ];
  totalSum = 0;

  calculateTotalSum() {
    this.totalSum = 0;
    for (let item of this.data) {
      this.totalSum += item.column1 + item.column2 + item.column3;
    }
  }
}