如何在Angular的ng2-smart-table中实现自动计算并支持手动修改

1. 调整列配置 #

修改ng2-smart-table的列配置，确保平均温度字段支持手动编辑，同时实现「无手动输入时自动计算显示」的逻辑：

settings = {
  columns: {
    temperaturaMaxima: {
      title: '最高温度',
      type: 'number',
      editable: true,
      editor: {
        type: 'number',
        // 监听最高温度输入变化，实时更新平均温度（仅当平均温度未手动修改时生效）
        onComponentInitFunction: (instance: any) => {
          instance.valueChanges.subscribe((value: number) => {
            const row = instance.row;
            if (row?.temperaturaMinima !== undefined) {
              const calculatedMedia = value + (row.temperaturaMinima / 2);
              if (row.temperaturaMedia === undefined || row.temperaturaMedia === calculatedMedia) {
                row.temperaturaMedia = calculatedMedia;
              }
            }
          });
        }
      }
    },
    temperaturaMinima: {
      title: '最低温度',
      type: 'number',
      editable: true,
      editor: {
        type: 'number',
        // 监听最低温度输入变化，实时更新平均温度（仅当平均温度未手动修改时生效）
        onComponentInitFunction: (instance: any) => {
          instance.valueChanges.subscribe((value: number) => {
            const row = instance.row;
            if (row?.temperaturaMaxima !== undefined) {
              const calculatedMedia = row.temperaturaMaxima + (value / 2);
              if (row.temperaturaMedia === undefined || row.temperaturaMedia === calculatedMedia) {
                row.temperaturaMedia = calculatedMedia;
              }
            }
          });
        }
      }
    },
    temperaturaMedia: {
      title: '平均温度',
      type: 'number',
      editable: true,
      // 显示逻辑：优先展示手动输入值，无值时自动计算
      valuePrepareFunction: (value: number, row: any) => {
        if (value !== undefined && value !== null) {
          return value;
        }
        const tMax = row.temperaturaMaxima || 0;
        const tMin = row.temperaturaMinima || 0;
        return tMax + (tMin / 2);
      }
    }
  },
  // 开启新增、编辑功能并启用确认机制
  add: {
    addButtonContent: '<i class="nb-plus"></i>',
    createButtonContent: '<i class="nb-checkmark"></i>',
    cancelButtonContent: '<i class="nb-close"></i>',
    confirmCreate: true
  },
  edit: {
    editButtonContent: '<i class="nb-edit"></i>',
    saveButtonContent: '<i class="nb-checkmark"></i>',
    cancelButtonContent: '<i class="nb-close"></i>',
    confirmSave: true
  }
};

2. 处理新增与编辑的确认事件 #

在组件类中监听表格的createConfirm和editConfirm事件，确保数据保存时的计算逻辑符合需求：

import { Component } from '@angular/core';
import { LocalDataSource } from 'ng2-smart-table';

@Component({
  selector: 'app-temperature-table',
  templateUrl: './temperature-table.component.html'
})
export class TemperatureTableComponent {
  settings = { /* 上述列配置内容 */ };
  source: LocalDataSource = new LocalDataSource();

  constructor() {
    // 模拟初始数据（手动设置的平均温度会被保留）
    this.source.load([
      { temperaturaMaxima: 30, temperaturaMinima: 20, temperaturaMedia: 40 }
    ]);
  }

  onCreateConfirm(event: any): void {
    const { temperaturaMaxima, temperaturaMinima, temperaturaMedia } = event.newData;
    // 若未手动输入平均温度，自动计算填充
    if (!temperaturaMedia) {
      event.newData.temperaturaMedia = temperaturaMaxima + (temperaturaMinima / 2);
    }
    // 确认保存新增数据
    event.confirm.resolve(event.newData);
  }

  onEditConfirm(event: any): void {
    const { temperaturaMaxima, temperaturaMinima, temperaturaMedia } = event.newData;
    const calculatedMedia = temperaturaMaxima + (temperaturaMinima / 2);
    // 若平均温度未手动修改（与计算值一致或为空），则自动更新
    if (temperaturaMedia === calculatedMedia || !temperaturaMedia) {
      event.newData.temperaturaMedia = calculatedMedia;
    }
    // 确认保存编辑后的数据
    event.confirm.resolve(event.newData);
  }
}

3. 模板配置 #

在组件模板中添加表格并绑定事件：

<ng2-smart-table 
  [settings]="settings" 
  [source]="source" 
  (createConfirm)="onCreateConfirm($event)" 
  (editConfirm)="onEditConfirm($event)">
</ng2-smart-table>

关键逻辑说明 #

• 实时计算：通过编辑器的onComponentInitFunction监听最高/最低温度的输入变化，仅在平均温度未被手动修改时，自动更新平均温度值。
• 显示优先级：valuePrepareFunction优先展示用户手动输入的平均温度，无值时才自动计算，确保手动修改的内容不会被覆盖。
• 保存校验：新增/编辑确认时，若未手动设置平均温度则自动计算填充，已手动设置则保留用户输入值。

内容的提问来源于stack exchange，提问作者Ítalo Gustavo Araújo