Angular组件中onSubmitClick更新getter属性canSave报错的解决方法

你遇到的错误是因为canSave是仅定义了get的计算属性，属于只读属性，无法直接赋值。要实现提交时让canSave返回false的需求，可以通过新增一个状态变量来控制getter的返回值，具体修改如下：

步骤1：添加私有状态变量 #

在组件类中新增一个私有变量，用于标记当前是否处于提交状态：

export class ManagePhonesPopup extends DialogBaseComponent<Params, boolean> implements OnInit {
  public override params!: Params;
  public rows: IPhoneRow[] = [];
  private _submitting = false; // 新增：标记提交状态

  // ... 其他代码
}

步骤2：修改canSave getter #

在getter逻辑开头加入提交状态的判断，若处于提交中则直接返回false：

public get canSave(): boolean {
  // 提交中直接返回false，禁用保存操作
  if (this._submitting) return false;

  const isValid = this.rows.every(r => r.phoneControl.valid);
  if (!isValid) {
    return false;
  }
  const changes = this.managePhonesPopupService.getChanges(this.rows, this.params);
  return changes.phones.changed || changes.emergencyPhone.changed;
}

步骤3：更新onSubmitClick方法 #

在提交开始时将_submitting设为true，同时处理请求失败的情况，恢复状态以允许重新提交：

public onSubmitClick(): void {
  const changes = this.managePhonesPopupService.getChanges(this.rows, this.params);
  this._submitting = true; // 标记为提交中

  this.params
    .onSubmit(changes)
    .pipe(take(1))
    .subscribe({
      next: () => {
        this.close(true).then();
      },
      error: () => {
        // 请求失败时恢复状态，允许用户重新尝试提交
        this._submitting = false;
      }
    });
}

这样修改后，点击提交按钮时canSave会自动返回false，实现你想要的禁用效果，同时避免了直接赋值只读属性的错误。

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