Angular单选框绑定异步数据报错，如何更新SQL数据库？

出现这个错误是因为async管道返回的对象是只读不可变的（比如HTTP请求返回的响应对象默认被冻结，或是状态管理库返回的不可变状态），直接用[(ngModel)]绑定修改其属性会触发只读限制。

步骤1：在组件中创建本地可编辑变量 #

在组件类里定义本地变量，存储从异步流中复制的可编辑数据：

import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

@Component({
  // 组件元数据（保持你原有的配置）
})
export class YourComponent implements OnInit {
  system$: Observable<any>; // 你的原异步数据流
  localResult: any; // 本地可编辑的副本

  ngOnInit(): void {
    // 订阅异步流，复制数据到本地变量
    this.system$.subscribe(result => {
      // 浅拷贝对象，转为可编辑状态
      this.localResult = { ...result };
    });
  }

  onChangePrinter() {
    // 直接使用本地变量的值更新数据库
    console.log(this.localResult.printerOn);
    // 这里写更新SQL数据库的逻辑，传入this.localResult.printerOn即可
  }
}

步骤2：修改模板绑定 #

把模板中的[(ngModel)]绑定到本地变量localResult.printerOn，简化change事件的参数传递：

<div *ngIf="localResult">
  <input 
    type="radio" 
    id="printer-on" 
    name="printer" 
    value="T" 
    [(ngModel)]="localResult.printerOn"
    (change)="onChangePrinter()"
  />
  <label for="printer-on">Yes</label>
   
  <input 
    type="radio" 
    id="printer-off" 
    name="printer" 
    value="F" 
    [(ngModel)]="localResult.printerOn"
    (change)="onChangePrinter()"
  />
  <label for="printer-off">No</label>
</div>

替代方案（模板内直接复制） #

如果不想在组件里手动订阅，也可以在模板中直接复制异步返回的对象到本地变量：

<div *ngIf="system$ | async as result">
  <ng-container *ngIf="(localResult = { ...result })">
    <input 
      type="radio" 
      id="printer-on" 
      name="printer" 
      value="T" 
      [(ngModel)]="localResult.printerOn"
      (change)="onChangePrinter(localResult.printerOn)"
    />
    <label for="printer-on">Yes</label>
     
    <input 
      type="radio" 
      id="printer-off" 
      name="printer" 
      value="F" 
      [(ngModel)]="localResult.printerOn"
      (change)="onChangePrinter(localResult.printerOn)"
    />
    <label for="printer-off">No</label>
  </ng-container>
</div>

对应的组件方法：

onChangePrinter(value: string) {
  console.log(value);
  // 用value更新SQL数据库
}

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