无法使用Angular获取列值的动态总和

export interface Item {
  name: string;
  value: number;
}

@Component({
  selector: 'app-dynamic-sum',
  templateUrl: './dynamic-sum.component.html',
  styleUrls: ['./dynamic-sum.component.css']
})
export class DynamicSumComponent {
  items: Item[] = [
    { name: 'Item 1', value: 10 },
    { name: 'Item 2', value: 20 },
    { name: 'Item 3', value: 30 }
  ];

  get totalValue(): number {
    return this.items.reduce((sum, item) => sum + item.value, 0);
  }
}

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Value</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let item of items">
      <td>{{ item.name }}</td>
      <td>{{ item.value }}</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>{{ totalValue }}</td>
    </tr>
  </tfoot>
</table>

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

ngOnInit() {
  // 假设这是一个异步操作
  setTimeout(() => {
    this.items.push({ name: 'Item 4', value: 40 });
    this.cdr.detectChanges(); // 手动触发变更检测
  }, 1000);
}