Angular中subscribe返回对象而非TradeModel，无法修改属性的问题

1. 类型标注≠实例转换：TypeScript里的(tradeModel: TradeModel)只是编译阶段的类型提示，不会将JSON解析后的普通JS对象转换成TradeModel类的实例。从存储/HTTP请求拿到的数据本质是JSON字符串，解析后是普通对象，和你用new TradeModel()创建的实例不是一回事。
2. 对象只读限制：你遇到的Cannot assign to read only property错误，大概率是因为返回的普通对象被冻结（比如状态管理库的不可变数据策略，或者存储时被处理成只读），而类实例的属性默认是可写的，所以this.dragMoveTrade能正常修改。

方法1：手动映射属性到类实例 #

在subscribe回调里创建TradeModel实例，用Object.assign把普通对象的属性赋值进去：

.subscribe((rawTrade: any) => {
  if (rawTrade !== null && rawTrade !== undefined) {
    const tradeModel = new TradeModel();
    Object.assign(tradeModel, rawTrade);
    // 现在可以正常修改属性
    tradeModel.Stage = 3;
  }
})

方法2：给TradeModel添加构造函数简化实例化 #

修改TradeModel类，添加支持传入初始化数据的构造函数：

export class TradeModel {
  public TradeId: string;
  public ClientId: string;
  public UserId: string;
  public Stage: number;

  constructor(data?: Partial<TradeModel>) {
    Object.assign(this, data);
  }
}

之后在subscribe里直接用返回的对象创建实例：

.subscribe((rawTrade: any) => {
  if (rawTrade !== null && rawTrade !== undefined) {
    const tradeModel = new TradeModel(rawTrade);
    tradeModel.Stage = 3; // 无报错
  }
})

方法3：解除对象只读限制（如果是冻结导致） #

如果返回的对象被冻结，先深拷贝一份解除只读，再转换为类实例：

.subscribe((rawTrade: any) => {
  if (rawTrade !== null && rawTrade !== undefined) {
    // 用扩展运算符浅拷贝，复杂对象可以用JSON.parse(JSON.stringify())深拷贝
    const unfrozenTrade = {...rawTrade};
    const tradeModel = new TradeModel(unfrozenTrade);
    tradeModel.Stage = 3;
  }
})

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