Angular单表数组不同行值对比、mat-checkbox选中校验问题求助

原代码存在的问题 #

• 变量引用错误：循环内把insumoFila、tipoGastoFila定义为当前行的字段值（属于字符串/数字这类基础类型），后续判断中写的insumoFila[i]相当于对基础类型取数组下标，属于无效逻辑，永远返回undefined，所以判断条件直接被跳过。
• 循环变量被异常修改：if判断中多次使用i++，会直接改变循环的计数变量i，导致遍历逻辑完全混乱，根本无法按预期对比行数据。
• 校验逻辑不符合需求：原逻辑只尝试对比相邻行的字段，且判断条件逻辑错误，没有覆盖所有选中行的校验规则。

修复后的实现代码 #

TS部分修改 #

procesarClic() {
  const request = this.selection.selected;
  // 选中行数小于2无需校验，直接走后续逻辑
  if (request.length < 2) {
    this.openDialog(request);
    return;
  }

  // 取第一行的两个字段值作为对比基准
  const baseTipoGasto = request[0].tipoGasto;
  const baseInsumo = request[0].insumo;
  // 标记所有行的tipoGasto是否全部相同
  let allTipoGastoSame = true;
  // 标记所有行的insumo是否全部相同
  let allInsumoSame = true;

  // 从第二行开始遍历对比
  for (let i = 1; i < request.length; i++) {
    if (request[i].tipoGasto !== baseTipoGasto) {
      allTipoGastoSame = false;
    }
    if (request[i].insumo !== baseInsumo) {
      allInsumoSame = false;
    }
  }

  // 校验规则：如果tipoGasto不全部相同，且insumo也不全部相同，触发报错
  if (!allTipoGastoSame && !allInsumoSame) {
    window.alert("Los insumos no coinciden");
    // 调用selection的clear方法取消所有checkbox选中状态
    this.selection.clear();
    return;
  }

  // 校验通过，打开弹窗
  this.openDialog(request);
}

// 抽离打开弹窗的公共方法，避免重复代码
private openDialog(request: any[]) {
  const newTable = this.dialog.open(SolicitudCdpDialog, {
    width: '400px',
    disableClose: true,
    data: { datosItem: request }
  });
}

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