Angular 4子组件输入值求和问题：行与列实时统计实现

我来帮你搞定这个Angular表格求和的痛点！核心问题在于子组件输入值变化时没有通知父组件更新数据源，父组件也没有监听数据变化来重新计算汇总。下面是具体的实现方案：

第一步：改造子组件（LineComponent / app-riadok） #

让子组件接收每行的数据，并在值变化时向父组件发送事件通知：

子组件 TypeScript 代码 #

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-riadok',
  templateUrl: './line.component.html'
})
export class LineComponent {
  // 接收父组件传递的当前行数据（每一行是一个数值数组，对应各列的值）
  @Input() rowData: number[] = [];
  // 接收当前行的索引，方便父组件定位修改的行
  @Input() rowIndex: number = 0;
  // 定义输出事件，值变化时通知父组件
  @Output() valueChanged = new EventEmitter<{rowIndex: number, colIndex: number, value: number}>();

  // 输入框值变化时触发的方法
  onValueChange(colIndex: number, newValue: string) {
    // 把输入的字符串转成数字，避免字符串拼接错误
    const numValue = Number(newValue) || 0;
    // 更新当前行的数据
    this.rowData[colIndex] = numValue;
    // 向父组件发射事件，传递修改的位置和新值
    this.valueChanged.emit({
      rowIndex: this.rowIndex,
      colIndex: colIndex,
      value: numValue
    });
  }
}

子组件 HTML 代码（LineComponent.html） #

假设每行有3列输入框，循环渲染：

<div class="row">
  <input 
    type="number" 
    *ngFor="let val of rowData; let colIndex = index"
    [value]="val"
    (input)="onValueChange(colIndex, $event.target.value)"
  >
</div>

第二步：改造父组件（TableComponent） #

父组件需要传递数据给子组件，监听子组件的事件，并实时计算汇总值：

父组件 TypeScript 代码 #

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

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html'
})
export class TableComponent {
  // 初始化表格数据，示例为2行3列
  pole: number[][] = [
    [0, 0, 0],
    [0, 0, 0]
  ];

  // 监听子组件的值变化事件（可添加额外逻辑，比如值校验）
  handleRowValueChange(event: {rowIndex: number, colIndex: number, value: number}) {
    // 若组件使用OnPush变更检测策略，需注入ChangeDetectorRef并调用this.cdr.markForCheck()
  }

  // 用getter实时计算汇总值，每次pole数组变化时自动更新
  get sum(): number {
    // 扁平化二维数组，累加所有数值（空值/NaN按0处理）
    return this.pole.flat().reduce((total, num) => total + (num || 0), 0);
  }
}

父组件 HTML 代码（TableComponent.html） #

循环渲染子组件，传递行数据和索引，并绑定事件：

<div *ngFor="let row of pole; let rowIndex = index">
  <app-riadok 
    [rowData]="row" 
    [rowIndex]="rowIndex"
    (valueChanged)="handleRowValueChange($event)"
  ></app-riadok>
</div>
<div>sum : {{sum}}</div>

关键要点说明 #

1. 组件通信：通过@Input()传递数据给子组件，@Output()+EventEmitter让子组件通知父组件值变化，这是Angular组件间通信的标准方式。
2. 实时计算汇总：使用getter属性sum，它会在依赖的pole数组变化时自动重新计算，无需手动维护汇总值的状态。
3. 数据类型处理：输入框默认返回字符串，必须转成数字再计算，否则会出现字符串拼接的错误。
4. 变更检测：如果组件启用了changeDetection: ChangeDetectionStrategy.OnPush，需要在父组件的handleRowValueChange方法中调用this.cdr.markForCheck()（需注入ChangeDetectorRef）来触发变更检测。

这样修改后，每当你修改子组件里的输入框值，父组件的汇总值就会实时更新啦！

内容的提问来源于stack exchange，提问作者Sili